Basic layout for logic conditions

_locales/en/messages.json

@@ -2925,5 +2925,26 @@
     },
     "gyroLpfWhyNotSlightlyHigherMessage": {
         "message": "If there are not vibration problems and motors are not overheating, try going 188Hz instead"
+    },
+    "tabLogicConditions": {
+        "message": "Logic conditions"
+    },
+    "logicId": {
+        "message": "#"
+    },
+    "logicEnabled": {
+        "message": "Enabled"
+    },
+    "logicOperation": {
+        "message": "Operation"
+    },
+    "logicOperandA": {
+        "message": "Operand A"
+    },
+    "logicOperandB": {
+        "message": "Operand B"
+    },
+    "logicFlags": {
+        "message": "Flags"
     }
 }

gulpfile.js

@@ -49,7 +49,8 @@ sources.css = [
     './src/css/dropdown-lists/css/style_lists.css',
     './js/libraries/switchery/switchery.css',
     './js/libraries/jbox/jBox.css',
-    './node_modules/openlayers/dist/ol.css'
+    './node_modules/openlayers/dist/ol.css',
+    './src/css/logic.css'
 ];
 
 sources.js = [

src/css/logic.css

@@ -0,0 +1,22 @@
+.logic__background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: black;
+    opacity: 0.75;
+    z-index: 2000;
+}
+
+.logic__content {
+    position: absolute;
+    top: 2em;
+    bottom: 2em;
+    left: 4em;
+    right: 4em;
+    background-color: #efefef;
+    border-radius: 2px;
+    z-index: 2001;
+    padding: 2em;
+}

tabs/mixer.html

@@ -125,6 +125,28 @@
                 </div>
             </div>
         </div>
+
+        <div id="logic-wrapper">
+            <div id="logic-background" class="logic__background"></div>
+            <div id="logic-content" class="logic__content">
+                <div class="tab_title" data-i18n="tabLogicConditions"></div>
+                <table id="servo-mix-table" class="mixer-table">
+                        <thead>
+                            <tr>
+                                <th style="width: 75px" data-i18n="logicId"></th>
+                                <th data-i18n="logicEnabled"></th>
+                                <th data-i18n="logicOperation"></th>
+                                <th data-i18n="logicOperandA"></th>
+                                <th data-i18n="logicOperandB"></th>
+                                <th data-i18n="logicFlags"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+        
+                        </tbody>
+                    </table>
+            </div>
+        </div>
     </div>
     <div id="mixerApplyContent" class="is-hidden">
         <div class="modal__content">