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

Remove opt-out class, add docs on opting out, closes #300

Browse Source
This commit is contained in:
Lea Verou
2024-12-18 14:18:24 -05:00
parent 252adbd830
commit a41787d23a
5 changed files with 38 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/docs/essentials/index.md
View File

@@ -24,14 +24,30 @@ Here’s what we have so far:
{%- endfor -%}
</ul>
## Opting out of Essentials
## Opting out of Essentials on a case by case basis
If you don’t want to use all essentials, you can cherry pick just the parts you need.
For instructions on how to do that, refer to the individual pages.
So you've decided to use Essentials and now you need to style an element or a part of a page completely differently, what to do?
You can create an opt-out with the power of [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)!
You can also opt-out of Essentials styling by using a `wa-off` class on individual elements:
Instead of including Essentials with a `<link>` element, you can include it like this:
```html {.example}
```html
<style>
@import url('{% cdnUrl 'styles/themes/applied.css' %}') layer(wa);
@layer wa {
.wa-off,
.wa-off-deep,
.wa-off-deep * {
all: revert-layer;
}
}
</style>
```
Then you can opt-out of Essentials styling by using a `wa-off` class on individual elements or `wa-off-deep` for entire subtrees:
```html
<p>
<button>I’m Awesome</button>
<button class="wa-off">I’m not</button>
@@ -45,21 +61,23 @@ You can also opt-out of Essentials styling by using a `wa-off` class on individu
<p>Lorem Ipsum dolor sit amet</p>
<button >I’m also not</button>
</blockquote>
```
You can also use `wa-off-deep` to opt-out of Essentials styling for an element **and all its descendants**:
```html {.example}
<blockquote class="wa-off-deep">
<p>Lorem Ipsum dolor sit amet</p>
<button>I’m also not</button>
</blockquote>
```
This means you could opt an entire page out of Essentials styling by adding a `wa-off-deep` class to the `<html>` element.
You could even design opt-outs for specific elements!
E.g. to opt-out of `<details>` styling:
```css
@layer wa {
details.wa-details-off,
.wa-details-off details,{
all: revert-layer;
}
}
```
If you find yourself opting out of entire element types too much, you could consider only including the parts of Essentials you need instead of the whole thing.
You can find instructions for how to do that on the individual Essentials pages.

2
src/styles/applied.css
View File

@@ -90,7 +90,7 @@ video,
wa-callout,
wa-code-demo,
wa-viewport-demo {
&:where(:not(.wa-off, .wa-off-deep *)):has(+ *) {
&:has(+ *) {
margin: 0 0 var(--wa-space-xl) 0;
}
}

4
src/styles/native/button.css
View File

@@ -1,6 +1,4 @@
:is(button, input:where([type='button'], [type='reset'], [type='submit'])):where(
:not(:host *, .wa-off, .wa-off-deep *)
),
:is(button, input:where([type='button'], [type='reset'], [type='submit'])):where(:not(:host *)),
:host,
.wa-button:where(:not([part~='base'])) {
--background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));

2
src/styles/native/details.css
View File

@@ -1,5 +1,5 @@
/* Details */
details:not(.wa-off, .wa-off-deep *) {
details {
background-color: var(--wa-color-neutral-fill-quiet);
border-radius: var(--wa-panel-border-radius);
padding-block: 0;

4
src/styles/native/dialog.css
View File

@@ -1,6 +1,6 @@
/* <dialog> by itself or <wa-dialog> */
:host,
dialog:not(:host *, .wa-off, .wa-off-deep *) {
dialog:not(:host *) {
width: 31rem;
max-width: calc(100% - var(--wa-space-2xl));
max-height: calc(100% - var(--wa-space-2xl));
@@ -14,7 +14,7 @@ dialog:not(:host *, .wa-off, .wa-off-deep *) {
}
/* <dialog> wherever it is */
dialog:not(.wa-off, .wa-off-deep *) {
dialog {
flex-direction: column;
inset: 0;