WIP: all condition set UI elements in place - started condition form elements

src/plugins/condition/components/ConditionEdit.vue

@@ -36,9 +36,36 @@
         <span class="is-enabled c-c__trash"></span>
     </div>
     <div v-if="expanded"
-         class="condition-config-edit"
+         class="condition-config-edit widget-rule-content c-sw-editui__rules-wrapper holder widget-rules-wrapper flex-elem expanded"
     >
-        [form stuff]
+        <div id="ruleArea"
+             class="c-sw-editui__rules widget-rules"
+        >
+            <div class="c-sw-rule">
+                <div class="c-sw-rule__ui l-compact-form l-widget-rule has-local-controls">
+                    <div>
+                        <ul>
+                            <li>
+                                <label>Condition Name</label>
+                                <span class="controls">
+                                    <input class="t-rule-name-input"
+                                           type="text"
+                                    >
+                                </span>
+                            </li>
+                            <li>
+                                <label>Output</label>
+                                <span class="controls">
+                                    <select class="">
+                                        <option value="false">false</option>
+                                    </select>
+                                </span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 </template>

src/plugins/condition/components/condition.scss

@@ -36,8 +36,8 @@
     font-weight: bold;
 }
 
-.condition-output {
+.condition-summary .condition-description {
-    color: #7C7D80;
+    color: #999;
 }
 
 .condition-summary {
@@ -45,14 +45,56 @@
 }
 
 .condition-config {
-    padding: 0.6em 0;
+    padding: 0.3em 0;
+}
+
+.widget-condition form label {
+    flex-grow: 1;
+    margin-left: 0;
+}
+
+.l-widget-rule {
+    padding: 0;
+}
+
+.widget-rule-content.expanded {
+    margin: 0 3px;
+}
+
+.widget-rule-content.expanded ul {
+    border-top: solid 1px #ccc;
+    padding: 5px;
+}
+
+.l-compact-form ul li {
+    padding: 1px 0;
+}
+
+.l-compact-form ul li .controls {
+    line-height: 20px;
+    min-height: 20px;
+}
+
+.l-compact-form ul li > label {
+    display: block;
+    width: 90px;
+    text-align: right;
+    line-height: 20px;
+}
+
+.l-compact-form ul li .controls input[type="text"],
+.l-compact-form ul li .controls input[type="search"],
+.l-compact-form ul li .controls input[type="number"],
+.l-compact-form ul li .controls button,
+.l-compact-form ul li .controls select {
+    min-height: 20px;
 }
 
 .condition-config-edit {
-    border-top: solid 1px #ccc;
+    padding: 3px 0;
-    padding: 0.6em 0;
 }
 
+
 .c-c__disclosure-triangle,
 .c-c__menu-hamburger,
 .c-c__duplicate,
@@ -81,12 +123,12 @@
 
 .c-c__disclosure-triangle {
     &:before {
-        content: $glyph-icon-arrow-down;
+        content: $glyph-icon-arrow-right;
     }
 
     &--expanded {
         &:before {
-            transform: rotate(180deg);
+            transform: rotate(90deg);
         }
     }
 }

src/plugins/conditionSet/components/condition-set.scss

@@ -15,6 +15,7 @@ section {
     color: #7C7D80;
     display: flex;
     justify-content: stretch;
+    align-items: center;
 }
 
 .c-cs__ui__header-label {
@@ -37,6 +38,14 @@ section {
     margin: 0.4em 0.6em;
 }
 
+.condition-output {
+    color: #999;
+}
+
+.condition-description {
+    color: #333;
+}
+
 .checkbox.custom {
     display: flex;
     align-items: center;
@@ -63,6 +72,10 @@ section {
     margin-left: 0;
 }
 
+.widget-condition form input {
+    min-height: 24px;
+}
+
 .c-cs-button[class*="--major"],
 .c-cs-button[class*='is-active'],
 .c-cs-button--menu[class*="--major"],
@@ -104,12 +117,12 @@ section {
 
 .c-cs__disclosure-triangle {
     &:before {
-        content: $glyph-icon-arrow-down;
+        content: $glyph-icon-arrow-right;
     }
 
     &--expanded {
         &:before {
-            transform: rotate(180deg);
+            transform: rotate(90deg);
         }
     }
 }