[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; z-index: 3;
} }
.menu-content-overscroll {
padding-bottom: calc(var(--menu-space) * 30);
}
.menu-content-item { .menu-content-item {
padding: calc(var(--menu-space) * 3) calc(var(--menu-space) * 4); 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 { .menu-item-header {
margin-bottom: calc(var(--menu-space) * 2); margin-bottom: calc(var(--menu-space) * 2);
} }

View File

@ -90,16 +90,22 @@
<div class="form-helper"> <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> <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> </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"> <div class="form-wrap">
<label class="control-header-order-label">Header item order</label> <label class="control-header-order-label">Header item order</label>
</div> </div>
<div class="form-wrap"> <div class="form-wrap">
<div class="header-order"></div> <div class="header-order"></div>
</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> </div>
<div id="menu-content-header-greeting" class="menu-content-item"> <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> <button class="control-menu-header menu-nav-tab button" tabindex="-1">Header</button>
<div class="menu-nav-body menu-nav-body-header active"> <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-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-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-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> <a href="#menu-content-header-clock" class="menu-nav-sub button button-small" tabindex="-1">Clock</a>