eeb04ae436
* Add Partition to all our models * Add partitions into our serializers/fingerprinting * Make some amends to a few adapters ready for partitions * Amend blueprints to avoid linting error * Update all our repositories to include partitions, also Remove enabled/disable nspace repo and just use a nspace with conditionals * Ensure nspace and parition parameters always return '' no matter what * Ensure data-sink finds the model properly This will later be replaced by a @dataSink decorator but we are find kicking that can down the road a little more * Add all the new partition data layer * Add a way to set the title of the page from inside the route and make it accessibile via a route announcer * Make the Consul Route the default/basic one * Tweak nspace and partition abilities not to check the length * Thread partition through all the components that need it * Some ACL tweaks * Move the entire app to use partitions * Delete all the tests we no longer need * Update some Unit tests to use partition * Fix up KV title tests * Fix up a few more acceptance tests * Fixup and temporarily ignore some acceptance tests * Stop using ember-cli-page-objects fillable as it doesn't seem to work * Fix lint error * Remove old ACL related test * Add a tick after filling out forms * Fix token warning modal * Found some more places where we need a partition var * Fixup some more acceptance tests * Tokens still needs a repo service for CRUD * Remove acceptance tests we no longer need * Fixup and "FIXME ignore" a few tests * Remove an s * Disable blocking queries for KV to revert to previous release for now * Fixup adapter tests to follow async/function resolving interface * Fixup all the serializer integration tests * Fixup service/repo integration tests * Fixup deleting acceptance test * Fixup some ent tests * Make sure nspaces passes the dc through for when thats important * ...aaaand acceptance nspaces with the extra dc param |
||
|---|---|---|
| .. | ||
| README.mdx | ||
| debug.scss | ||
| index.scss | ||
| layout.scss | ||
| skin.scss | ||
README.mdx
---
class: css
---
# MainNavVertical
Used for styles of vertically orientated main application menus/navigation.
Menu item active state is applied on `.is-active` `<li>` elements. Additionally you can use the following placeholders for setting certin states manually:
- `%menu-nav-vertical-action-active` The 'active' or currently selected state.
- `%menu-nav-vertical-action-intent` The highlighted state, usually for `:hover`
and `:focus`.
`%menu-nav-vertical-hoisted` will 'hoist' an `<li>` element to the top of the
containing block, the containing block defaults to the current viewport. If
you need to define a different ancestor for a containing block you can use
`transform` (see below).
```hbs preview-template
<div class="wrapper">
<nav class="main-nav-vertical in-viewport">
<ul>
<li role="separator">Title</li>
<li>
<a href="">One</a>
</li>
<li class="is-active">
<a href="">Two (is-active)</a>
</li>
<li class="with-intent">
<a href="">Three (with-intent)</a>
</li>
<li class="hoisted">
<a href="">Four (hoisted)</a>
</li>
<li role="separator">Title</li>
<li class="custom-active">
<a href="">One (custom-active)</a>
</li>
<li>
<a href="">Two</a>
</li>
<li>
<a href="">Three</a>
</li>
</ul>
</nav>
</div>
```
```css preview-template
.main-nav-vertical {
@extend %main-nav-vertical;
}
.main-nav-vertical li.hoisted {
@extend %main-nav-vertical-hoisted;
}
.main-nav-vertical .with-intent > * {
@extend %main-nav-vertical-action-intent;
}
.main-nav-vertical .custom-active > * {
@extend %main-nav-vertical-action-active;
}
.wrapper {
/* a transform is required to mark this element as the containing block */
/* for hoisting, otherwise the viewport is the containing block */
transform: translate(0, 0);
background-color: var(--gray-600);
padding-top: 64px;
}
```