Working on editor

Author: andrewbrg

src/css/main.css

@@ -146,24 +146,6 @@ input.cmn-tgl-rnd-flt:checked + label:after {
     background-color: #ffffff;
 }
 
-.navbar .dropdown-menu {
-    background-color: #262a2e;
-    border: 1px solid rgba(255, 255, 255, 0.18);
-}
-
-.dropdown-item {
-    color: rgba(255, 255, 255, .5);
-}
-
-.dropdown-item:hover {
-    background-color: #1b1d21;
-    color: rgba(255, 255, 255, 1);
-}
-
-.dropdown-divider {
-    border-top: 1px solid rgba(255, 255, 255, 0.18);
-}
-
 /*******************************************************************************/
 /*********************************** Ace Editor ********************************/
 /*******************************************************************************/
@@ -348,16 +330,16 @@ input.cmn-tgl-rnd-flt:checked + label:after {
 }
 
 /*******************************************************************************/
-/********************************* Form inputs *********************************/
+/************************************ Forms ************************************/
 /*******************************************************************************/
 input[type="text"], select {
     background: transparent;
     border: none;
-    border-bottom: 1px solid #ccc;
     width: 100%;
     font-family: inherit;
     font-size: 1.2em;
     color: #ccc;
+    height: 36px;
 }
 
 input[type="text"]:hover,
@@ -366,3 +348,31 @@ select:hover,
 select:focus {
     border-bottom: 2px solid rgba(0, 123, 255, .7);
 }
+
+/*******************************************************************************/
+/********************************** Drop down **********************************/
+/*******************************************************************************/
+.form-group {
+    margin: 0.8rem 0;
+    border-bottom: 1px dashed rgb(56, 61, 65);
+    padding: 0 0 0.4rem 0;
+}
+
+
+.dropdown-menu {
+    background-color: #262a2e;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.dropdown-item {
+    color: rgba(255, 255, 255, .5);
+}
+
+.dropdown-item:hover {
+    background-color: #1b1d21;
+    color: rgba(255, 255, 255, 1);
+}
+
+.dropdown-divider {
+    border-top: 1px solid rgba(255, 255, 255, 0.18);
+}

src/html/modals/editor/appearance.html

@@ -1,6 +1,57 @@
 <div class="container-fluid">
     <form>
         <div class="row">
+            <div class="col-lg-4 col-md-6 col-sm-12">
+                <div class="form-group">
+                    <label>
+                        <strong>Font size</strong><br/>
+                        <span>Editor font size in pixel units</span>
+                    </label>
+                    <div>
+                        <select data-action="ide-setting" data-option="fontSize">
+                            <option value="11">11</option>
+                            <option value="12">12</option>
+                            <option value="13">13</option>
+                            <option value="14">14</option>
+                            <option value="15">15</option>
+                            <option value="16">16</option>
+                            <option value="17">17</option>
+                            <option value="18">18</option>
+                            <option value="19">19</option>
+                            <option value="20">20</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-4 col-md-6 col-sm-12">
+                <div class="form-group">
+                    <label>
+                        <strong>Font family</strong><br/>
+                        <span>Your preferred font-family</span>
+                    </label>
+                    <div>
+                        <select data-action="ide-setting" data-option="fontFamily"></select>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-4 col-md-6 col-sm-12">
+                <div class="form-group">
+                    <label>
+                        <strong>Editor theme</strong><br/>
+                        <span>Editor font family to use</span>
+                    </label>
+                    <div>
+                        <select data-action="ide-setting" data-option="fontFamily">
+                            <option value="ace">Ace</option>
+                            <option value="slim">Slim</option>
+                            <option value="smooth">Smooth</option>
+                            <option value="wide">Wide</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
         </div>
     </form>
-</div>
+</div>

vendor/range-slider/range-slider.css

@@ -1,5 +1,7 @@
 .range-slider {
     width: 100%;
+    height: 36px;
+    padding: 7px 0 0 0;
 }
 
 .range-slider-range {