[design] move header order controls into own section

This commit is contained in:
zombieFox 2020-02-19 14:12:30 +00:00
parent eb65574101
commit 04d9ee1de0
3 changed files with 15 additions and 8 deletions

View File

@ -191,14 +191,14 @@
z-index: 3;
}
.menu-content-overscroll {
padding-bottom: calc(var(--menu-space) * 30);
}
.menu-content-item {
padding: calc(var(--menu-space) * 3) calc(var(--menu-space) * 4);
}
.menu-content-overscroll .menu-content-item:last-child {
padding-bottom: calc(var(--menu-space) * 30);
}
.menu-item-header {
margin-bottom: calc(var(--menu-space) * 2);
}

View File

@ -90,16 +90,22 @@
<div class="form-helper">
<p class="control-header-item-justify-helper form-helper-item">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
</div>
<hr>
<div class="form-helper">
<p class="control-header-area-width-helper form-helper-item">Some Header items may not be shown.</p>
</div>
</div>
</div>
<div id="menu-content-header-order" class="menu-content-item">
<div class="menu-item-header">
<h1 class="menu-item-header-text">Item order</h1>
</div>
<div class="menu-item-form">
<div class="form-wrap">
<label class="control-header-order-label">Header item order</label>
</div>
<div class="form-wrap">
<div class="header-order"></div>
</div>
<div class="form-helper">
<p class="control-header-area-width-helper form-helper-item">Some Header items may not be shown.</p>
</div>
</div>
</div>
<div id="menu-content-header-greeting" class="menu-content-item">

View File

@ -14,6 +14,7 @@
<button class="control-menu-header menu-nav-tab button" tabindex="-1">Header</button>
<div class="menu-nav-body menu-nav-body-header active">
<a href="#menu-content-header-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
<a href="#menu-content-header-order" class="menu-nav-sub button button-small" tabindex="-1">Item Order</a>
<a href="#menu-content-header-greeting" class="menu-nav-sub button button-small" tabindex="-1">Greeting</a>
<a href="#menu-content-header-transitional" class="menu-nav-sub button button-small" tabindex="-1">Transitional words</a>
<a href="#menu-content-header-clock" class="menu-nav-sub button button-small" tabindex="-1">Clock</a>