Initial commit of the Macro editor's mockup.

macro.css

@@ -0,0 +1,93 @@
+.main-wrapper {
+  width: 500px;
+}
+
+h1 {
+  margin-bottom: 3rem;
+}
+
+.action--item {
+  padding-left: 8px;
+}
+
+.action--item.active,
+.action--item.active:hover {
+  background-color: white;
+  font-weight: bold;
+  color: black;
+  border-color: black;
+  z-index: 10;
+}
+
+.macro-settings {
+  border: 1px solid black;
+  border-top-color: #999;
+  z-index: 100;
+}
+
+.macro-settings .helper {
+  position: absolute;
+  display: block;
+  height: 13px;
+  background: #FFF;
+  width: 100%;
+  left: 0;
+  top: -14px;
+}
+
+.action--item.active.callout,
+.macro-settings.callout {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
+}
+
+.list-group-item .move-handle:hover {
+  cursor: move;
+}
+
+.action--edit {
+  float: right;
+}
+
+.action--edit:hover {
+  color: #337ab7;
+  cursor: pointer;
+}
+
+.action--trash {
+  float: right;
+  margin-right: 1rem;
+}
+
+.action--trash:hover {
+  color: #d9534f;
+  cursor: pointer;
+}
+
+.action--edit__form {
+  background-color: whtie;
+  margin-left: -.5rem;
+  margin-right: -15px;
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #ddd;
+}
+
+.flex-button-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.flex-button {
+  align-self: flex-end;
+}
+
+.add-new__action-item:hover {
+  cursor: pointer;
+}
+
+.add-new__action-item--link,
+.add-new__action-item--link:active,
+.add-new__action-item--link:hover {
+  text-decoration: none;
+  color: #337ab7;
+}