ui: change coloring of secondary navigation elements (#10259)

This commit is contained in:
John Cowen 2021-05-24 11:51:16 +01:00 committed by GitHub
parent 13fcfca31e
commit 46ea7b42a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 14 deletions

View File

@ -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;
}
```

View File

@ -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;

View File

@ -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;
}