js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Breadcrumb styling (#171)

Browse Source 
allow breadcrumb labels to inherit color
This commit is contained in:
Lindsay M
2024-09-17 10:09:02 -04:00
committed by GitHub
parent 14914abf65
commit 25944d8d7d
2 changed files with 58 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/docs/components/breadcrumb.md
View File

@@ -35,6 +35,36 @@ For websites, you'll probably want to use links instead. You can make any breadc
</wa-breadcrumb>
```
### Prefixes
Use the `prefix` slot to add content before any breadcrumb item.
```html {.example}
<wa-breadcrumb>
<wa-breadcrumb-item>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
Home
</wa-breadcrumb-item>
<wa-breadcrumb-item>Articles</wa-breadcrumb-item>
<wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
</wa-breadcrumb>
```
### Suffixes
Use the `suffix` slot to add content after any breadcrumb item.
```html {.example}
<wa-breadcrumb>
<wa-breadcrumb-item>Documents</wa-breadcrumb-item>
<wa-breadcrumb-item>Policies</wa-breadcrumb-item>
<wa-breadcrumb-item>
Security
<wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
</wa-breadcrumb-item>
</wa-breadcrumb>
```
### Custom Separators
Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
@@ -66,12 +96,27 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
</wa-breadcrumb>
```
### Prefixes
### Custom Colors
Use the `prefix` slot to add content before any breadcrumb item.
Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Prefixes, suffixes, and separators can be styled using CSS parts.
```html {.example}
<wa-breadcrumb>
<style>
.redcrumbs wa-breadcrumb-item {
color: firebrick;
}
.redcrumbs wa-breadcrumb-item:last-of-type {
color: crimson;
}
.redcrumbs wa-breadcrumb-item::part(separator) {
color: pink;
}
.redcrumbs wa-breadcrumb-item::part(prefix),
.redcrumbs wa-breadcrumb-item::part(suffix) {
color: currentColor;
}
</style>
<wa-breadcrumb class="redcrumbs">
<wa-breadcrumb-item>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
Home
@@ -81,21 +126,6 @@ Use the `prefix` slot to add content before any breadcrumb item.
</wa-breadcrumb>
```
### Suffixes
Use the `suffix` slot to add content after any breadcrumb item.
```html {.example}
<wa-breadcrumb>
<wa-breadcrumb-item>Documents</wa-breadcrumb-item>
<wa-breadcrumb-item>Policies</wa-breadcrumb-item>
<wa-breadcrumb-item>
Security
<wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
</wa-breadcrumb-item>
</wa-breadcrumb>
```
### With Dropdowns
Dropdown menus can be placed in the default slot to provide additional options.

18
src/components/breadcrumb-item/breadcrumb-item.styles.ts
View File

@@ -2,15 +2,19 @@ import { css } from 'lit';
export default css`
:host {
color: var(--wa-color-text-link);
display: inline-flex;
}
:host(:last-of-type) {
color: var(--wa-color-text-quiet);
}
.breadcrumb-item {
display: inline-flex;
align-items: center;
font: inherit;
font-weight: var(--wa-font-weight-action);
color: var(--wa-color-neutral-on-quiet);
line-height: var(--wa-line-height-normal);
white-space: nowrap;
}
@@ -19,7 +23,7 @@ export default css`
display: inline-block;
font: inherit;
text-decoration: none;
color: inherit;
color: currentColor;
background: none;
border: none;
border-radius: var(--wa-border-radius-s);
@@ -29,16 +33,12 @@ export default css`
transition: color var(--wa-transition-normal) var(--wa-transition-easing);
}
:host(:not(:last-of-type)) .breadcrumb-item__label {
color: var(--wa-color-text-link);
}
:host(:not(:last-of-type)) .breadcrumb-item__label:hover {
color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
}
:host(:not(:last-of-type)) .breadcrumb-item__label:active {
color: var(--wa-color-text-link);
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
}
.breadcrumb-item__label:focus {
@@ -61,6 +61,7 @@ export default css`
.breadcrumb-item__prefix,
.breadcrumb-item__suffix {
display: inline-flex;
color: var(--wa-color-text-quiet);
}
::slotted([slot='prefix']) {
@@ -76,6 +77,7 @@ export default css`
}
.breadcrumb-item__separator {
color: var(--wa-color-text-quiet);
display: inline-flex;
align-items: center;
margin: 0 var(--wa-space-s);