initial commit

styles/animation-editor.less

@@ -0,0 +1,464 @@
+@import "ui-variables";
+
+.animation-editor {
+    width: 100%;
+    height: 100%;
+    font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
+}
+.animation-editor > div{
+    width: 100%;
+    height: 100%;
+    background: black;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: stretch;
+    align-content: stretch;
+}
+
+.animation-preview {
+    width: 100%;
+    height: 100%;
+    order: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    align-self: auto;
+}
+
+@animation-channel-tick-width: 18px;
+@animation-channel-tick-height: 40px;
+
+.animation-timeline {
+    width: 100%;
+    background: #363636;
+    overflow: auto;
+    -webkit-user-select: none;
+}
+
+.animation-timeline .time-display {
+    height: 22px;
+    color: #9f9f9f;
+    text-align: right;
+}
+
+.animation-timeline .time-display > .frame-rate {
+}
+
+.animation-timeline .time-display > .frames {
+    height: 22px;
+    line-height: 22px;
+}
+
+.animation-timeline .time-display > .seconds {
+    padding-left: 3px;
+    height: 22px;
+    line-height: 22px;
+}
+
+.animation-timeline .time-display > .new-layer {
+  padding-left: 3px;
+  height: 20px;
+  line-height: 22px;
+  margin-left: 5px;
+  margin-top: 2px;
+  cursor: pointer;
+}
+
+.animation-timeline .delete {
+  margin-top: 13px;
+  float: right;
+  display: inline-block;
+  font-size: 14px;
+  line-height: 12px;
+  position: relative;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+}
+
+.animation-timeline .flags{
+    width: 56px;
+    height: 39px;
+    border-right: thin solid #525252;
+    float: left;
+}
+
+.animation-channel-label.selected .flags{
+    border-right: thin solid #CFAE67;
+    padding-left: 2px;
+}
+
+.animation-timeline .locked, .animation-timeline .visible{
+    padding: 13px 9px 0px 9px;
+    float: left;
+    display: inline-block;
+    font-size: 14px;
+    line-height: 12px;
+    position: relative;
+    cursor: pointer;
+    width: 22px;
+    height: 38px;
+}
+
+.animation-channel-label .drop-bottom.drag-over:after{
+    content: "";
+    display: block;
+    width: 270px;
+    height: 6px;
+    background: #1F8BFF;
+    margin-top: 16px;
+}
+
+.animation-channel-label .drop-top.drag-over:before{
+    content: "";
+    display: block;
+    width: 270px;
+    height: 6px;
+    background: #1F8BFF;
+    margin-top: -4px;
+}
+
+.animation-channel-label .drop-top.drag-over:first-child:before{
+    margin-top: -1px;
+}
+
+.animation-timeline .fa-circle.locked, .animation-timeline .fa-circle.visible{
+    font-size: 7px;
+    top: -2px;
+    left: 2px;
+}
+
+.animation-timeline-notches-container{
+
+    height: 22px;
+}
+.animation-timeline-notch {
+    cursor: ew-resize;
+    width: (@animation-channel-tick-width * 5);
+    height: @animation-channel-tick-height / 2;
+    line-height: @animation-channel-tick-height / 2;
+    font-size: 10px;
+    padding-left: 6px;
+    color: #a5a5a7;
+    display: inline-block;
+    float: left;
+}
+
+.animation-channel {
+    height: @animation-channel-tick-height;
+    clear: both;
+}
+
+.animation-channel-label {
+    width: @animation-channel-tick-width * 15;
+    height: @animation-channel-tick-height;
+    line-height: @animation-channel-tick-height;
+    font-size: 12px;
+    text-align: right;
+    padding-right: 12px;
+    float: left;
+    background: #363636;
+    color: #959597;
+    border-top: thin solid #525252;
+}
+
+.animation-channel-label input{
+    background: none;
+    border: none;
+    cursor: pointer;
+    left: -51px;
+    position: relative;
+}
+.animation-channel-label input:focus{
+    background: white;
+    border: thin solid grey;
+    color: #3f3f3f;
+}
+
+.animation-channel-label .type{
+    float: right;
+    font-size: 10px;
+    opacity: 0.5;
+}
+
+.animation-channel-label.selected {
+    background: #CE8D01;
+}
+
+.animation-channel-label.odd {
+    background: #404040;
+}
+.animation-channel-label.selected.odd {
+    background: #CE8D01;
+}
+
+.animation-channel-label:last-child{
+    border-bottom: thin solid #525252;
+}
+.animation-channel .animation-channel-keyframes {
+    display: inline-block;
+}
+
+.animation-channel-keyframes {
+    cursor: pointer;
+    height: @animation-channel-tick-height + 2;
+}
+
+@keyframe-slot-color: #404040;
+@keyframe-slot-shadow: #3A3A3A;
+@keyframe-slot-hightlight: #4B4B4B;
+
+.animation-channel  .animation-channel-keyframe-slot {
+    width: @animation-channel-tick-width;
+    height: @animation-channel-tick-height;
+    display: inline-block;
+    padding: 0px;
+    margin: 0px;
+
+    background: @keyframe-slot-color;
+    border-left: thin solid @keyframe-slot-hightlight;
+    border-top: thin solid @keyframe-slot-hightlight;
+    border-right: thin solid @keyframe-slot-shadow;
+    border-bottom: thin solid @keyframe-slot-shadow;
+}
+
+@keyframe-marker-color: #3C3C3C;
+@keyframe-marker-shadow: #3A3A3A;
+@keyframe-marker-hightlight: #4B4B4B;
+
+.animation-channel .animation-channel-keyframe-slot.marker {
+    background: @keyframe-marker-color;
+    border-left: thin solid @keyframe-marker-hightlight;
+    border-top: thin solid @keyframe-marker-hightlight;
+    border-right: thin solid @keyframe-marker-shadow;
+    border-bottom: thin solid @keyframe-marker-shadow;
+}
+
+.animation-channel .animation-channel-keyframe-slot.shadowed-dark {
+    background: #1A4A85
+}
+
+.animation-channel .animation-channel-keyframe-slot.shadowed-light {
+    background: #5176A3;
+}
+
+.animation-channel .animation-channel-keyframe-slot.selected {
+    background: #635433;
+}
+
+.animation-channel .animation-channel-keyframe-slot.exists {
+    border: thin solid #2f2f2f;
+}
+
+.animation-channel .animation-channel-keyframe-slot.selected.exists {
+    background: #CE8D01;
+}
+
+.animation-channel .animation-channel-keyframe-slot.exists:after{
+    content: "•";
+    position: relative;
+    float: left;
+    color: #1f1f1f;
+    margin-left: 0px;
+    margin-top: -3px;
+    font-size: 29px;
+}
+
+.animation-channel .animation-channel-keyframe-slot:hover {
+    opacity: 0.4;
+}
+
+.animation-channel .animation-channel-keyframe-slot.drag-over,
+.animation-channel .animation-channel-keyframe-slot.marker.drag-over,
+.animation-channel .animation-channel-keyframe-slot.exceeds.drag-over,
+.animation-channel .animation-channel-keyframe-slot.selected.drag-over,
+.animation-channel .animation-channel-keyframe-slot.exists.drag-over{
+    background: #1F8BFF;
+    opacity: 1.0;
+}
+
+.animation-channel .animation-channel-keyframe-slot.drag-over-empty,
+.animation-channel .animation-channel-keyframe-slot.marker.drag-over-empty,
+.animation-channel .animation-channel-keyframe-slot.exceeds.drag-over-empty,
+.animation-channel .animation-channel-keyframe-slot.selected.drag-over-empty,
+.animation-channel .animation-channel-keyframe-slot.exists.drag-over-empty{
+    background: #37526F;
+    opacity: 1.0;
+}
+.animation-channel .animation-channel-keyframe-slot.drag-over-mismatched,
+.animation-channel .animation-channel-keyframe-slot.marker.drag-over-mismatched,
+.animation-channel .animation-channel-keyframe-slot.exceeds.drag-over-mismatched,
+.animation-channel .animation-channel-keyframe-slot.selected.drag-over-mismatched,
+.animation-channel .animation-channel-keyframe-slot.exists.drag-over-mismatched{
+    background: #6F1212;
+    border: thin solid #664C4C;
+    opacity: 1.0;
+}
+
+.animation-channel .animation-channel-keyframe-slot.exceeds {
+    background-color: #5E3737;
+}
+
+.animation-channel .animation-channel-keyframe-slot > .slot-effect{
+    background: green;
+    width: @animation-channel-tick-width - 2;
+    height: @animation-channel-tick-height - 2;
+    display: none;
+    position: absolute;
+}
+
+.animation-timeline-indicator {
+    position: absolute;
+    opacity: 0.5;
+    width: 20px;
+    height: 20px;
+    z-index: 1;
+}
+
+.animation-timeline-indicator-handle {
+    width: 17px;
+    height: 22px;
+    margin: 0px 2px 2px 1px;
+    background: red;
+    border: thin solid #9f0000;
+    cursor: ew-resize;
+}
+
+.animation-timeline-indicator-line {
+    width: 2px;
+    background: #9f0000;
+    pointer-events: none;
+    opacity: 0.7;
+}
+
+.animation-channel-labels-container {
+    width: 271px;
+    clear: both;
+    background: #404040;
+    border-right: thin solid #363636;
+}
+
+.animation-editor-playback-controls{
+    background: #3f3f3f;
+    width: 250px;
+    height: 40px;
+    position: absolute;
+    margin-top: -57px;
+    z-index: 2;
+    border: thin solid #525252;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.animation-editor-playback-controls > i {
+    font-size: 22px;
+    line-height: 22px;
+    padding: 8.5px;
+    color: #afafaf;
+    margin-top: 0px;
+}
+
+.animation-editor-playback-controls > .fa {
+    cursor: pointer;
+}
+.animation-editor-playback-controls > .fa:hover{
+    color: #efefef;
+}
+
+.animation-editor-playback-controls > .fa-gear{
+    color: #6f6f6f;
+    padding: 6.5px;
+}
+.animation-editor-playback-controls > .fa-gear:hover{
+    color: #9f9f9f;
+}
+
+.animation-preview > canvas{
+    cursor: pointer;
+}
+
+.event-editor > atom-text-editor.is-focused {
+    outline: auto -webkit-focus-ring-color;
+}
+
+.animation-settings {
+    width: 150px;
+    height: 63px;
+    position: relative;
+    margin-top: -100px;
+    margin-left: 121px;
+    z-index: 1;
+}
+
+.settings-container{
+    width: 100%;
+    height: 100%;
+    background-color: #363636;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    padding: 5px;
+    border-radius: 2px;
+    border: 1px solid rgba(255, 255, 255, 0.07);
+    z-index: 1;
+}
+.settings-container > label{
+    color: grey;
+    display: block;
+}
+
+.settings-mousetrap{
+    position:absolute;
+    width: 10000px;
+    height: 10000px;
+    margin-left: -5000px;
+    margin-top: -5000px;
+    z-index: -1;
+}
+
+
+/*
+.right-pane input[type="number"] {
+  color: @text-color;
+  font-family: @font-family;
+  background-color: @input-background-color;
+  font-size: (@font-size + 4);
+  border: 1px solid @input-border-color;
+}
+*/
+
+.animation-editor-properties {
+    background: @base-background-color;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+
+.animation-editor-properties input[type="number"]:focus{
+    background: #616161;
+    color: #afafaf;
+}
+
+.animation-editor-properties input[type="number"]:focus::selection{
+    background: #afaf3f;
+}
+
+.animation-editor .face {
+  background-color: @tree-view-background-color;
+}
+
+.eye-mode {
+  border-bottom: 1px solid @panel-heading-border-color;
+  border-top: 1px solid fadein(@background-color-highlight, 10%);
+
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(@panel-heading-background-color, darken(@panel-heading-background-color, 10%));
+  width: 100%;
+}
+
+.video-container {
+  background-color: @tree-view-background-color;
+}
+.animation-editor .pixi-container {
+    background-color: @tree-view-background-color;
+}

styles/atom-react.less

@@ -0,0 +1,15 @@
+@import "ui-variables";
+
+input[type="number"] {
+  color: @text-color;
+  font-family: @font-family;
+  background-color: @input-background-color;
+  font-size: (@font-size + 4);
+  border: 1px solid @input-border-color;
+  text-align: right;
+}
+
+
+.jibo-tool-bar .btn{
+    height: 100%;
+}

styles/behavior-editor.less

@@ -0,0 +1,219 @@
+@import "ui-variables";
+
+.behavior-editor-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+li.list-item.selected-item {
+  background-color: @background-color-selected;
+  span {
+    color: @text-color-highlight;
+  }
+}
+
+.right-pane {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: @tree-view-background-color;
+  overflow: hidden;
+  border: solid @pane-item-border-color 2px;
+}
+
+.right-pane h1 {
+  font-family: @font-family;
+  color: @text-color;
+  font-weight: bold;
+  margin-bottom: 3px;
+  margin-top: 3px;
+}
+
+.right-pane hr {
+  margin-top: 10px;
+  margin-bottom: 3px;
+}
+
+.right-pane p {
+  font-family: @font-family;
+  color: @text-color;
+  font-weight: bold;
+  font-size: 15px;
+  white-space: normal;
+}
+
+.arguments-scroll-container {
+  flex: 1;
+  margin-left: 5px;
+  margin-right: 5px;
+  overflow-x: auto;
+}
+
+.arguments-container {
+  width: 100%;
+  height: 400px;
+}
+
+.argument-editor {
+  width: 100%;
+  height: 200px;
+}
+
+.input-div {
+  background-color: @input-background-color;
+  border: 1px solid @input-border-color;
+  box-shadow: 1px 1px 1px 0 @input-border-color inset;
+  margin-top: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 2px 3px;
+  font-size: 14px;
+  width: 95%;
+  height: 25px;
+  color: @text-color;
+  font-family: @font-family;
+}
+
+[contenteditable="true"].input-div {
+  white-space: nowrap;
+  overflow: hidden;
+}
+[contenteditable="true"].input-div br {
+  display:none;
+
+}
+[contenteditable="true"].input-div * {
+  display:inline;
+  white-space:nowrap;
+}
+
+.jibo-list-group {
+  list-style: none;
+  background-color: transparent;
+  border: none;
+}
+
+.behavior-selector-modal {
+  width: 800px;
+  height: 600px;
+  margin-left: -150px;
+  background-color: @input-background-color;
+  border: solid @base-border-color 1px;
+  .panel-heading {
+    height: 35px;
+  }
+
+  .contents {
+    border: solid @base-border-color 1px;
+    display: flex;
+    height: 450px;
+    margin: 10px;
+    .description-contents {
+      height: 450px;
+      width: 330px;
+      .behavior-description {
+        height: 418px;
+        margin-left: 10px;
+        background-color: @tree-view-background-color;
+        div {
+          padding: 10px;
+        }
+      }
+    }
+    .list-contents {
+      width: 223px;
+      height: 450px;
+    }
+    .list-group {
+      overflow-y: scroll;
+      height: 418px;
+      position: relative;
+      padding-left: 10px;
+      padding-right: 10px;
+      padding-bottom: 10px;
+      padding-top: 10px;
+      width: 100%;
+      background-color: @tree-view-background-color;
+    }
+
+    .list-group.schema-list {
+      margin-left: 5px;
+    }
+
+    .list-group:focus {
+      outline: auto -webkit-focus-ring-color;
+    }
+  }
+
+  .btn-group {
+    margin-left: 10px;
+  }
+}
+
+.asset-selector-modal {
+  width: 900px;
+  height: 600px;
+  margin-left: -150px;
+  background-color: @input-background-color;
+  border: solid @base-border-color 1px;
+  .panel-heading {
+    height: 35px;
+  }
+
+  .contents {
+    border: solid @base-border-color 1px;
+    display: flex;
+    height: 450px;
+    margin: 10px;
+    .preview-contents {
+      height: 400px;
+      width: 430px;
+      .asset-preview {
+        overflow: scroll;
+        width: 410px;
+        height: 418px;
+        padding: 10px;
+        background-color: @tree-view-background-color;
+      }
+    }
+    .name-list-contents {
+      width: 453px;
+      height: 450px;
+    }
+    .list-contents {
+      width: 253px;
+      height: 450px;
+    }
+    .list-group {
+      overflow-y: scroll;
+      height: 418px;
+      position: relative;
+      padding-left: 10px;
+      padding-right: 10px;
+      padding-bottom: 10px;
+      padding-top: 10px;
+      width: 100%;
+      background-color: @tree-view-background-color;
+    }
+    .asset-list {
+      overflow-y: scroll;
+      height: 418px;
+      position: relative;
+      padding-right: 5px;
+      padding-left: 5px;
+      li {
+        padding-left: 5px;
+      }
+    }
+
+    .list-group:focus {
+      outline: auto -webkit-focus-ring-color;
+    }
+  }
+
+  .btn-group {
+    margin-left: 10px;
+  }
+}

styles/index.less

@@ -0,0 +1,483 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+.color-picker,
+.color-picker *,
+.cp-saturation-spectrum,
+.cp-saturation-spectrum *,
+.cp-hue-spectrum,
+.cp-hue-spectrum * {
+  box-sizing: border-box;
+}
+.cp-saturation-spectrum,
+.cp-hue-spectrum {
+  position: relative;
+  display: inline-block;
+}
+.cp-saturation-white,
+.cp-saturation-black {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.cp-saturation-white {
+  background: linear-gradient(to right, #fff, rgba(204,154,129,0));
+}
+.cp-saturation-black {
+  background: linear-gradient(to top, #000, rgba(204,154,129,0));
+}
+.cp-saturation-spectrum {
+  cursor: pointer;
+}
+.cp-saturation-spectrum .cp-saturation-drag {
+  display: none;
+  border: 1px solid #fff;
+  border-radius: 10px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+.cp-saturation-spectrum .cp-saturation-drag .inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #000;
+  border-radius: 10px;
+}
+.cp-hue-spectrum {
+  background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+  cursor: pointer;
+}
+.cp-hue-spectrum .cp-hue-drag {
+  display: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  border: 1px solid #000;
+}

styles/jibo-rule-linter.less

@@ -0,0 +1,33 @@
+@import "ui-variables";
+
+atom-text-editor.editor {
+  .gutter .line-number {
+    &.jibo-line-number-red {
+      color: @text-color-error;
+      font-weight: bold;
+    }
+  }
+
+  .jibo-highlight-red .region {
+    background-color: @text-color-error;
+  }
+}
+
+.rule-panel {
+  height: 100%;
+  width: 480px;
+}
+
+.rule-panel .json-container {
+  display: block;
+  position: absolute;
+  height: auto;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  left: 0;
+  margin-top: 125px;
+  margin-bottom: 26px;
+  margin-right: 10px;
+  margin-left: 10px;
+}

styles/layout.less

@@ -0,0 +1,38 @@
+.layout {
+    width: 100%;
+    height: 100%;
+    white-space: nowrap;
+}
+
+.layout div {
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.h-layout {
+    width: 100%;
+    height: 100%;
+    white-space: nowrap;
+    display: inline-flex;
+}
+
+
+.h-child-container {
+    width: 100%;
+    height: 100%;
+    float: left;
+}
+
+.v-child-container {
+    width: 100%;
+    height: 100%;
+}
+
+.layout-handle {
+    margin: auto;
+}
+
+.layout-handle:hover {
+    background-color: #999999;
+}

styles/main.less

@@ -0,0 +1,21 @@
+@import "ui-variables";
+
+.modal-background {
+  background-color: @base-background-color;
+}
+
+.fill {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.fill > div {
+  /* these are the flex items */
+  flex-grow: 1;
+}
+
+.bodyRenderer {
+    width: 800;
+    height: 600;
+}

styles/mim-editor.less

@@ -0,0 +1,311 @@
+@import "ui-variables";
+
+.mim-editor {
+    
+    overflow-x: auto;
+    
+    .mim-editor-frame {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        flex-direction: row;
+    }
+
+    .left-pane {
+        min-width: 300px;
+        max-width: 500px;
+        height: 100%;
+        flex: 1;
+        margin-right: 5px;
+    }
+    
+    .right-pane {
+        min-width: 570px;
+        height: 100%;
+        flex: 1;
+        border: none;
+        margin-left: 5px;
+    }
+
+    .mim-title {
+        font-size: 1.6em;
+        -webkit-user-select: none;
+        margin-top: 10px;
+        width: 100%;
+        display:table;
+    }
+
+    .mim-title > div {
+        display: table-cell;
+    }
+
+    .mim-title .setting-title {
+        padding-left: 10px;
+        width: 160px;
+    }
+
+    .mim-title > .mim-id {
+        font-style: italic;
+    }
+    
+    .mim-setting {
+        margin-bottom: 4px;
+    }
+
+    .mim-setting > div {
+        width: 100%;
+        display:flex;
+        flex-direction: row;
+    }
+
+    .mim-setting > div > div {
+        display: inline-block;
+    }
+
+    .mim-setting .setting-title {
+        font-size: 1.2em;
+        -webkit-user-select: none;
+        //vertical-align: middle;
+        padding-top: 4px;
+        width: 160px;
+    }
+
+    .mim-setting .option {
+        flex: 1;
+    }
+    
+    .mim-gui-option {
+        > div, .checkbox {
+            display: inline-block;
+        }
+    }
+
+    .prompt-pane-container {
+        display: table;
+        height: 100%;
+        width: 100%;
+    }
+
+    .prompt-list-header {
+        display: table-row;
+        margin-bottom: 5px;
+    }
+
+    .prompt-list-outer {
+        display: table-row;
+        height: 100%;
+    }
+
+    .prompt-list-inner {
+        height: 100%;
+        position: relative;
+    }
+
+    .prompt-list {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+    .prompt-list-title {
+        font-size: 1.2em;
+        -webkit-user-select: none;
+        vertical-align: middle;
+        display: inline;
+        margin-right: 20px;
+    }
+
+    .mim-prompt {
+        border-style: solid;
+        border-width: 1px;
+        border-color: #666666;
+        margin-top: 2px;
+        margin-bottom: 2px;
+        padding-left: 8px;
+        display: block;
+    }
+
+    .mim-prompt .row {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .mim-prompt .row .mim-setting {
+        flex: 1;
+        //min-width: 285px;
+    }
+
+    .mim-prompt .row .delete-button-wrapper {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    
+    .mim-prompt .mim-setting .setting-title:not(.short) {
+        width: 145px;
+    }
+    .mim-prompt .mim-setting .setting-title.short {
+        width: 60px;
+        margin-left: 20px;
+    }
+    
+    .hidden-block-setting {
+        visibility: hidden;
+        pointer-events: none;
+    }
+    
+    .hidden-setting {
+        display: none;
+    }
+    
+    .disabled-setting {
+        opacity: 0.4;
+    }
+    
+    .mim-type-announcement {
+        .needs-mim-type:not(.works-with-type-AN):not(.mim-prompt) {
+            .hidden-setting;
+        }
+        .needs-mim-type:not(.works-with-type-AN).mim-prompt {
+            .disabled-setting;
+        }
+    }
+    
+    .mim-type-optional-response {
+        .needs-mim-type:not(.works-with-type-OR):not(.mim-prompt) {
+            .hidden-setting;
+        }
+        .needs-mim-type:not(.works-with-type-OR).mim-prompt {
+            .disabled-setting;
+        }
+    }
+    
+    .mim-type-question {
+        .needs-mim-type:not(.works-with-type-Q):not(.mim-prompt) {
+            .hidden-setting;
+        }
+        .needs-mim-type:not(.works-with-type-Q).mim-prompt {
+            .disabled-setting;
+        }
+    }
+    
+    .mim-prompt:not(.prompt-type-Errors) .prompt-cat-error-only {
+        .hidden-block-setting;
+    }
+}
+
+.mim-menu-modal {
+    width: 900px;
+    height: 600px;
+    margin-left: -150px;
+    background-color: @input-background-color;
+    border: solid @base-border-color 1px;
+    .panel-heading {
+        height: 35px;
+    }
+
+    .contents {
+        border: solid @base-border-color 1px;
+        display: flex;
+        flex-direction: column;
+        height: 450px;
+        margin: 10px;
+        
+        .list-header {
+            display: flex;
+            width: 100%;
+            padding: 5px;
+            background-color: @tree-view-background-color;
+            .list-title {
+                vertical-align: middle;
+                width: 75px;
+            }
+        }
+        
+        .list-outer {
+            //display: table-row;
+            //height: 100%;
+            flex-grow: 1;
+            
+            .list-inner {
+                height: 100%;
+                //position: relative;
+                
+                .list {
+                    display: block;
+                    //position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    overflow-y: scroll;
+                    overflow-x: hidden;
+                    
+                    .button-entry {
+                        display: flex;
+                        flex-direction: row;
+                        
+                        .delete-button-wrapper {
+                            align-content: center;
+                            background-color: @tree-view-background-color;
+                        }
+                        
+                        .column {
+                            flex-grow: 1;
+                            padding: 2px;
+                            border: solid @base-border-color 1px;
+                            background-color: @tree-view-background-color;
+                            
+                            .option-title {
+                                text-align: center;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    .btn-group {
+      margin-left: 10px;
+    }
+}
+
+.color-modal {
+    width: 900px;
+    height: 600px;
+    margin-left: -150px;
+    background-color: @input-background-color;
+    border: solid @base-border-color 1px;
+    .panel-heading {
+        height: 35px;
+    }
+
+    .contents {
+        border: solid @base-border-color 1px;
+        display: flex;
+        flex-direction: column;
+        height: 450px;
+        margin: 10px;
+    }
+    
+    .btn-group {
+      margin-left: 10px;
+    }
+}
+
+.color-preview {
+    display:flex;
+    flex-direction: row;
+    justify-content: space-around;
+    
+    > div {
+        
+        display: inline-block;
+    }
+}

styles/toolbar.less

@@ -0,0 +1,28 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.toolbar {
+  width: 100%;
+  height: 38px;
+  background-color: @app-background-color;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  padding: 6px 0px;
+}
+
+.comboBox {
+  background-color: @button-background-color;
+  border: 1px solid @button-border-color;
+  width: 30px;
+  height: 30px;
+}
+
+.combo-box-list {
+  background-color: @base-background-color;
+  border: 1px solid @button-border-color;
+  position: absolute;
+  width: 300px;
+  top: 0px;
+  left: 100px;
+  z-index: 10000;
+}

styles/tree-view.less

@@ -0,0 +1,158 @@
+@import "ui-variables";
+
+
+.behavior-tree-container {
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.decorator-container {
+  display: flex;
+  width: 100%;
+  flex-grow: 0.2;
+  overflow: hidden;
+}
+
+.tree-grid-view {
+  position: relative;
+  white-space: nowrap;
+  width: 100%;
+  min-height: 100%;
+  flex-grow: 1;
+  overflow: hidden;
+  background-color: @tree-view-background-color;
+  border: solid rgba(0, 0, 0, 0.5) 2px;
+}
+
+.tree-grid-view .arguments-scroll-container {
+  height: 92%;
+  width: 99%;
+  margin-top: 5px;
+  position: absolute;
+  overflow-x: hidden;
+}
+
+.tree-grid-view:focus .arguments-scroll-container {
+  outline: auto -webkit-focus-ring-color;
+}
+
+
+.tree-view-level {
+  position: relative;
+  width: 100%;
+}
+
+.scroll-container {
+  width: 100%;
+  height: 100%;
+}
+
+.scroll-content {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 95%;
+  width: 100%;
+  position: absolute;
+}
+
+.row-wrapper {
+//  white-space: nowrap;
+  height: 26px;
+}
+
+.row-wrapper:hover {
+  background-color: @background-color-highlight;
+}
+
+.row-wrapper.row-wrapper-selected {
+  background-color: @background-color-selected;
+}
+
+.drop-bar {
+//  background-color: #93c3cd;
+  height: 5px;
+  width: 100%;
+}
+
+.arrow {
+  font-size: @font-size;
+  position: absolute;
+  color: @text-color;
+  padding-top: 3px;
+  font-size: large;
+}
+
+.row-wrapper > .cell {
+  /*border-bottom: 0px solid #FFFFFF;*/
+  /*border-top: 1px solid #FFFFFF;*/
+  /*border-left: 1px solid #FFFFFF;*/
+  /*border-right: 1px solid #FFFFFF;*/
+  width: 200px;
+  height: 20px;
+  display: inline-block;
+  position: relative;
+  left: 0;
+}
+
+.row-wrapper-header {
+  white-space: nowrap;
+  height: 30px;
+  width: 100%;
+  display: flex;
+}
+
+.row-wrapper-header > .cell {
+  width: 200px;
+  height: 30px;
+  display: inline-table;
+  color: #aaaaaa;
+  text-shadow: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
+  border-top: 1px solid rgba(255, 255, 255, 0.17);
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(#43484d, #2b2f32);
+}
+
+.row-wrapper-header > .cell > .separator {
+  width: 2px;
+  height: 100%;
+  resize: horizontal;
+  float: right;
+  cursor: ew-resize;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.row-wrapper-header > .cell > .separator:hover {
+  background-color: #bbbbbb;
+}
+
+.row-wrapper > div > p {
+  text-align: left;
+  font-size: 14px;
+  margin-left: 5px;
+  margin-top: auto;
+  margin-bottom: auto;
+  position: absolute;
+  font-family: @font-family;
+//  border-left: 2px;
+//  vertical-align: middle;
+  -webkit-user-select: none;
+  color: @text-color;
+}
+.row-wrapper > div > p.row-selected-text {
+  color: @text-color-highlight;
+}
+
+
+.row-wrapper-header > div > h1 {
+  text-align: left;
+  font-size: 15px;
+  line-height: 15px;
+  min-height: 15px;
+  margin: 0px;
+  margin-left: 5px;
+  position: absolute;
+  font-family: @font-family;
+  margin-top: 7px;
+}