[design] change menu layout control order

Author: zombieFox

src/index.html

@@ -232,53 +232,53 @@ <h1 class="menu-item-header-text">Area order</h1>
 </div>
 <divclass="menu-item">
 <divclass="menu-item-header">
-<h1class="menu-item-header-text">Padding</h1>
+<h1class="menu-item-header-text">Global scaling</h1>
 </div>
 <divclass="menu-item-form">
 <divclass="input-wrap">
-<labelfor="control-layout-padding">Padding outside Header and Bookmark Area</label>
+<labelfor="control-layout-size">Size</label>
 <divclass="form-group form-group-block mb-0">
-<inputid="control-layout-padding" class="control-layout-padding mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
-<divclass="control-layout-padding-count form-group-text form-group-medium form-group-radius-left"></div>
+<inputid="control-layout-size" class="control-layout-size mr-3" type="range" min="50" max="200" value="0" step="5" tabindex="-1">
+<divclass="control-layout-size-count form-group-text form-group-medium form-group-radius-left"></div>
 </div>
 </div>
+<pclass="control-layout-size-helper form-helper small">Resize all elements on the page.</p>
 <divclass="button-wrap">
-<buttonclass="control-layout-padding-default button mb-0" tabindex="1">Default Padding size</button>
+<buttonclass="control-layout-size-default button mb-0" tabindex="1">Default Global scaling size</button>
 </div>
 </div>
 </div>
 <divclass="menu-item">
 <divclass="menu-item-header">
-<h1class="menu-item-header-text">Gutter</h1>
+<h1class="menu-item-header-text">Padding</h1>
 </div>
 <divclass="menu-item-form">
 <divclass="input-wrap">
-<labelfor="control-layout-gutter">Gutter between Header and Bookmark items</label>
+<labelfor="control-layout-padding">Padding outside Header and Bookmark Area</label>
 <divclass="form-group form-group-block mb-0">
-<inputid="control-layout-gutter" class="control-layout-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
-<divclass="control-layout-gutter-count form-group-text form-group-medium form-group-radius-left"></div>
+<inputid="control-layout-padding" class="control-layout-padding mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
+<divclass="control-layout-padding-count form-group-text form-group-medium form-group-radius-left"></div>
 </div>
 </div>
 <divclass="button-wrap">
-<buttonclass="control-layout-gutter-default button mb-0" tabindex="1">Default Gutter size</button>
+<buttonclass="control-layout-padding-default button mb-0" tabindex="1">Default Padding size</button>
 </div>
 </div>
 </div>
 <divclass="menu-item">
 <divclass="menu-item-header">
-<h1class="menu-item-header-text">Global scaling</h1>
+<h1class="menu-item-header-text">Gutter</h1>
 </div>
 <divclass="menu-item-form">
 <divclass="input-wrap">
-<labelfor="control-layout-size">Size</label>
+<labelfor="control-layout-gutter">Gutter between Header and Bookmark items</label>
 <divclass="form-group form-group-block mb-0">
-<inputid="control-layout-size" class="control-layout-size mr-3" type="range" min="50" max="200" value="0" step="5" tabindex="-1">
-<divclass="control-layout-size-count form-group-text form-group-medium form-group-radius-left"></div>
+<inputid="control-layout-gutter" class="control-layout-gutter mr-3" type="range" min="0" max="40" value="0" tabindex="-1">
+<divclass="control-layout-gutter-count form-group-text form-group-medium form-group-radius-left"></div>
 </div>
 </div>
-<pclass="control-layout-size-helper form-helper small">Resize all elements on the page.</p>
 <divclass="button-wrap">
-<buttonclass="control-layout-size-default button mb-0" tabindex="1">Default Global scaling size</button>
+<buttonclass="control-layout-gutter-default button mb-0" tabindex="1">Default Gutter size</button>
 </div>
 </div>
 </div>