ui: change coloring of secondary navigation elements (#10259)
This commit is contained in:
parent
13fcfca31e
commit
46ea7b42a3
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
class: ember
|
||||
status: needs-love
|
||||
---
|
||||
# TabNav
|
||||
|
||||
`<TabNav />` renders a list of items as linked tabs (there is also an option
|
||||
to use labels vs anchors for links for radio button based tabs).
|
||||
|
||||
Each item in the list should be a hash of `label`, `href` and `selected`.
|
||||
|
||||
- `label`: The text to show
|
||||
- `href`: a href, probably generated via `href-to`
|
||||
- `selected`: whether the item is in the selected state or not, probably
|
||||
generated via `is-href`
|
||||
|
||||
**Please note:** This component should probably be rebuilt using contextual
|
||||
components and our `Action` component, alternatively this could be hand built
|
||||
with native HTML using the same `nav/ul/li/a` pattern and you could just use
|
||||
the CSS component to style it. Unless there is a reason to do this, this
|
||||
component should be used pending a refactor (please remove this note once
|
||||
refactored into contextual components using our `Action` component)
|
||||
|
||||
```hbs preview-template
|
||||
<figure>
|
||||
<figcaption>A TabNav with a conditional button using `compact` which removes empty values from arrays</figcaption>
|
||||
<TabNav @items={{
|
||||
compact
|
||||
(array
|
||||
(hash label="Health Checks" href="#" selected=true)
|
||||
(hash label="Service Instances" href="#" selected=(is-href "docs.something"))
|
||||
(if false (hash label="Don't show me" href="#" selected=false) '')
|
||||
(hash label="Lock Sessions" href="#" selected=false)
|
||||
(hash label="Metadata" href="#" selected=false)
|
||||
)
|
||||
}}/>
|
||||
</figure>
|
||||
```
|
||||
|
||||
```css
|
||||
.tab-nav {
|
||||
@extend %tab-nav;
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
%with-animated-tab-selection ul::after,
|
||||
%tab-button-selected {
|
||||
@extend %frame-brand-300;
|
||||
@extend %frame-blue-300;
|
||||
}
|
||||
%tab-nav li a {
|
||||
@extend %tab-button;
|
||||
|
|
|
@ -1,7 +1,3 @@
|
|||
%tab-nav {
|
||||
border-top: $decor-border-200;
|
||||
border-color: $gray-200;
|
||||
}
|
||||
%tab-nav ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
@ -16,25 +12,28 @@
|
|||
/* %frame-transparent-something */
|
||||
border-bottom: $decor-border-100;
|
||||
}
|
||||
%tab-nav {
|
||||
/* %frame-transparent-something */
|
||||
border-color: $gray-200;
|
||||
}
|
||||
%with-animated-tab-selection ul::after,
|
||||
%tab-button {
|
||||
border-bottom: $decor-border-300;
|
||||
}
|
||||
%tab-nav {
|
||||
/* %frame-transparent-something */
|
||||
border-color: var(--gray-200);
|
||||
}
|
||||
%tab-button {
|
||||
@extend %with-transition-500;
|
||||
transition-property: background-color;
|
||||
border-color: $transparent;
|
||||
color: $gray-500;
|
||||
transition-property: background-color, border-color;
|
||||
border-color: var(--transparent);
|
||||
color: var(--gray-500);
|
||||
}
|
||||
%tab-button-intent,
|
||||
%tab-button-active {
|
||||
/* %frame-gray-something */
|
||||
background-color: $gray-100;
|
||||
background-color: var(--gray-100);
|
||||
}
|
||||
%tab-button-intent {
|
||||
border-color: var(--gray-300);
|
||||
}
|
||||
%tab-nav.animatable .selected a {
|
||||
border-color: $transparent !important;
|
||||
border-color: var(--transparent) !important;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue