mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
add hover queries (#1035)
This commit is contained in:
Cory LaViska
@@ -116,10 +116,12 @@
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet) !important; /* TODO - remove after native styles refactor */
|
||||
background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
|
||||
color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet) !important; /* TODO - remove after native styles refactor */
|
||||
background: var(--wa-color-surface-default) !important; /* TODO - remove after native styles refactor */
|
||||
color: var(--wa-color-text-quiet) !important; /* TODO - remove after native styles refactor */
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
|
||||
@@ -9,8 +9,10 @@ wa-copy-button.copy-button {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: 0.25rem;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
|
||||
@@ -495,8 +495,10 @@ table.colors {
|
||||
tbody {
|
||||
tr {
|
||||
border: none;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -47,6 +47,7 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
- Added `--tag-max-size` to `<wa-select>` when using `multiple`
|
||||
- Added support for `data-dialog="open <id>"` to `<wa-dialog>`
|
||||
- Added support for `data-drawer="open <id>"` to `<wa-drawer>`
|
||||
- Added `@media (hover: hover)` to component hover styles to prevent sticky hover states
|
||||
- Fixed a bug in `<wa-radio-group>` that caused radios to uncheck when assigning a numeric value [issue:924]
|
||||
- Fixed `<wa-button-group>` so dividers properly show between buttons
|
||||
- Fixed the tooltip position in `<wa-slider>` when using RTL
|
||||
@@ -61,8 +62,8 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
## 3.0.0-alpha.13
|
||||
|
||||
- 🚨 BREAKING: Renamed `<image-comparer>` to `<wa-comparison>` and improved compatibility for non-image content
|
||||
- 🚨 BREAKING: Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
|
||||
- 🚨 BREAKING: Renamed the `image` slot to `media` for a more appropriate naming convention
|
||||
- 🚨 BREAKING: Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
|
||||
- 🚨 BREAKING: Renamed the `image` slot to `media` for a more appropriate naming convention
|
||||
- Added [a theme builder](/docs/themes/edit/) to create your own themes
|
||||
- Added a new Blog & News pattern category
|
||||
- Added a new free component: `<wa-scroller>` (#1 of 14 per stretch goals)
|
||||
@@ -124,7 +125,7 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
### Design Tokens
|
||||
|
||||
- Added `--wa-color-[hue]` tokens with the "core" color of each scale, regardless of which tint it lives on.
|
||||
You can find them in the first column of each color palette.
|
||||
You can find them in the first column of each color palette.
|
||||
|
||||
### Themes
|
||||
|
||||
@@ -149,20 +150,21 @@ You can find them in the first column of each color palette.
|
||||
- Fixed an incorrect CSS value in the expand icon
|
||||
- Fixed a bug that prevented the description from being read by screen readers
|
||||
|
||||
#### `<wa-option>`
|
||||
#### `<wa-option>`
|
||||
|
||||
- `label` attribute to override the generated label (useful for rich content)
|
||||
- `defaultLabel` property
|
||||
- Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
|
||||
- Dropped `base` part for easier styling. CSS can now be applied directly to the element itself.
|
||||
|
||||
#### `<wa-menu-item>`
|
||||
#### `<wa-menu-item>`
|
||||
|
||||
- `label` attribute to override the generated label (useful for rich content)
|
||||
- `defaultLabel` property
|
||||
- Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
|
||||
|
||||
#### `<wa-card>`
|
||||
|
||||
- Fixed a bug where child elements did not have correct rounding when headers and footers were absent.
|
||||
- Re-introduced `--border-color` so that the card itself can have a different border color than its inner borders.
|
||||
- Fixed a bug that prevented slots from showing automatically without `with-` attributes
|
||||
@@ -348,12 +350,12 @@ Here's a list of some of the things that have changed since Shoelace v2. For que
|
||||
- Removed `inline` from `<wa-color-picker>`
|
||||
- Removed `getFormControls()` since we now use Form Associated Custom Elements and can reliably access Web Awesome Elements via `formElement.elements`.
|
||||
- Removed `valueAsDate` from `<wa-input>`; use the following to mimic native behaviors:
|
||||
setter: `waInput.value = new Date().toLocaleDateString()`
|
||||
getter: `new Date(waInput.value)`
|
||||
setter: `waInput.value = new Date().toLocaleDateString()`
|
||||
getter: `new Date(waInput.value)`
|
||||
- Removed `valueAsNumber` from `<wa-input>`; use the following to mimic native behaviors:
|
||||
setter: `waInput.value = 5.toString()`
|
||||
getter: `Number(waInput.value)`
|
||||
setter: `waInput.value = 5.toString()`
|
||||
getter: `Number(waInput.value)`
|
||||
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
|
||||
|
||||
Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)
|
||||
Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)
|
||||
|
||||
@@ -36,8 +36,10 @@ img[aria-hidden='true'] {
|
||||
transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
:host([play]:hover) .control-box {
|
||||
opacity: 1;
|
||||
@media (hover: hover) {
|
||||
:host([play]:hover) .control-box {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:host([play]:not(:hover)) .control-box {
|
||||
|
||||
@@ -26,8 +26,10 @@
|
||||
transition: color var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
:host(:not(:last-of-type)) .label:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
@media (hover: hover) {
|
||||
:host(:not(:last-of-type)) .label:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
:host(:not(:last-of-type)) .label:active {
|
||||
|
||||
@@ -9,9 +9,11 @@
|
||||
flex-wrap: wrap;
|
||||
gap: 1px;
|
||||
|
||||
> :hover,
|
||||
&::slotted(:hover) {
|
||||
z-index: 1;
|
||||
@media (hover: hover) {
|
||||
> :hover,
|
||||
&::slotted(:hover) {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus and checked are always on top */
|
||||
|
||||
@@ -51,10 +51,12 @@
|
||||
}
|
||||
|
||||
/* Interactive states */
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
background-color: var(--background-color-hover, var(--background-color));
|
||||
border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
|
||||
color: var(--text-color-hover, var(--text-color));
|
||||
@media (hover: hover) {
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
background-color: var(--background-color-hover, var(--background-color));
|
||||
border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
|
||||
color: var(--text-color-hover, var(--text-color));
|
||||
}
|
||||
}
|
||||
|
||||
.button:not(.disabled):not(.loading):active {
|
||||
|
||||
@@ -22,7 +22,13 @@
|
||||
transition: color var(--wa-transition-fast) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
.button:hover:not([disabled]),
|
||||
@media (hover: hover) {
|
||||
.button:hover:not([disabled]) {
|
||||
background-color: var(--background-color-hover);
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
.button:focus-visible:not([disabled]) {
|
||||
background-color: var(--background-color-hover);
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
|
||||
@@ -166,8 +166,10 @@ textarea {
|
||||
transition: var(--wa-transition-normal) color;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
@@ -23,9 +23,11 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
|
||||
background-color: var(--background-color-hover);
|
||||
color: var(--text-color-hover);
|
||||
@media (hover: hover) {
|
||||
:host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
|
||||
background-color: var(--background-color-hover);
|
||||
color: var(--text-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
:host(:state(current)),
|
||||
|
||||
@@ -141,8 +141,10 @@
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
|
||||
:host([appearance='button']:hover:not([disabled], :state(checked))) {
|
||||
background-color: color-mix(in srgb, var(--wa-color-surface-default) 95%, var(--wa-color-mix-hover));
|
||||
@media (hover: hover) {
|
||||
:host([appearance='button']:hover:not([disabled], :state(checked))) {
|
||||
background-color: color-mix(in srgb, var(--wa-color-surface-default) 95%, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance='button']:focus-visible) {
|
||||
|
||||
@@ -198,8 +198,10 @@ label:has(select),
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
@@ -25,8 +25,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
:host(:hover:not([disabled])) .tab {
|
||||
color: currentColor;
|
||||
@media (hover: hover) {
|
||||
:host(:hover:not([disabled])) .tab {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
:host(:focus) {
|
||||
|
||||
@@ -33,8 +33,10 @@
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
:host(:hover) > [part='remove-button']::part(base) {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
@media (hover: hover) {
|
||||
:host(:hover) > [part='remove-button']::part(base) {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
:host(:active) > [part='remove-button']::part(base) {
|
||||
|
||||
@@ -1173,12 +1173,14 @@
|
||||
background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--wa-color-fill-quiet);
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--wa-color-fill-quiet);
|
||||
|
||||
&,
|
||||
+ tr {
|
||||
border-top-color: var(--wa-color-border-normal);
|
||||
&,
|
||||
+ tr {
|
||||
border-top-color: var(--wa-color-border-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -195,17 +195,21 @@
|
||||
margin-inline-end: 0.75em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
--box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
|
||||
&:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) {
|
||||
--box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color-checked), transparent 85%);
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
--box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
|
||||
&:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) {
|
||||
--box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color-checked), transparent 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type='range']:hover,
|
||||
wa-slider:hover {
|
||||
--thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--thumb-color), transparent 85%);
|
||||
@media (hover: hover) {
|
||||
input[type='range']:hover,
|
||||
wa-slider:hover {
|
||||
--thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--thumb-color), transparent 85%);
|
||||
}
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
@@ -220,8 +224,10 @@
|
||||
margin-inline-end: 0.75em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
--thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
--thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:state(checked))::part(thumb) {
|
||||
|
||||
@@ -11,8 +11,10 @@
|
||||
/* Doesn't apply transform to buttons in dropdowns or button groups.
|
||||
* For dropdowns, this prevents the dropdown panel from shifting. */
|
||||
&:not(:where(wa-button-group &, wa-dropdown &, wa-radio-group &)) {
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -58,15 +60,17 @@
|
||||
}
|
||||
|
||||
&:not([disabled]) {
|
||||
&:hover {
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--gradient-bottom) 0%,
|
||||
var(--gradient-middle) 51.88%,
|
||||
var(--gradient-top) 100%
|
||||
);
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--gradient-bottom) 0%,
|
||||
var(--gradient-middle) 51.88%,
|
||||
var(--gradient-top) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -106,10 +106,12 @@
|
||||
text-decoration: var(--wa-link-decoration-default);
|
||||
-webkit-text-decoration: var(--wa-link-decoration-default);
|
||||
|
||||
&:hover {
|
||||
color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
|
||||
text-decoration: var(--wa-link-decoration-hover);
|
||||
-webkit-text-decoration: var(--wa-link-decoration-hover);
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
|
||||
text-decoration: var(--wa-link-decoration-hover);
|
||||
-webkit-text-decoration: var(--wa-link-decoration-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,9 +119,11 @@
|
||||
color: var(--wa-color-text-normal);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
text-decoration: none;
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user