mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
feat(list,menu): implement forced colors
PiperOrigin-RevId: 520501176
This commit is contained in:
parent
2c1c80d3d6
commit
712aab3efc
@ -216,10 +216,8 @@
|
||||
}
|
||||
|
||||
.with-three-line & {
|
||||
/*
|
||||
* In three line, trailing-supporting-text must align with the mid-line of
|
||||
* the headline text.
|
||||
*/
|
||||
// In three line, trailing-supporting-text must align with the mid-line of
|
||||
// the headline text.
|
||||
padding-block-start: calc(
|
||||
(
|
||||
var(--_list-item-label-text-line-height) -
|
||||
@ -240,7 +238,7 @@
|
||||
height: var(--_list-item-leading-image-height);
|
||||
width: var(--_list-item-leading-image-width);
|
||||
border-radius: var(--_list-item-leading-image-shape);
|
||||
/* Min height is two-line height */
|
||||
// Min height is two-line height
|
||||
padding-block: calc(
|
||||
(
|
||||
var(--_list-item-two-line-container-height) -
|
||||
@ -264,7 +262,7 @@
|
||||
);
|
||||
|
||||
.with-three-line & {
|
||||
/* In three line, icon must align with the mid-line of headline text */
|
||||
// In three line, icon must align with the mid-line of headline text
|
||||
padding-block-start: calc(
|
||||
(
|
||||
var(--_list-item-label-text-line-height) -
|
||||
@ -283,7 +281,7 @@
|
||||
);
|
||||
|
||||
.with-three-line & {
|
||||
/* In three line, icon must align with the mid-line of headline text */
|
||||
// In three line, icon must align with the mid-line of headline text
|
||||
padding-block-start: calc(
|
||||
(
|
||||
var(--_list-item-label-text-line-height) -
|
||||
@ -393,7 +391,7 @@
|
||||
width: var(--_list-item-leading-video-width);
|
||||
border-radius: var(--_list-item-leading-video-shape);
|
||||
margin-inline-start: var(--_list-item-leading-video-leading-space);
|
||||
/* Min height is three-line height */
|
||||
// Min height is three-line height
|
||||
padding-block: calc(
|
||||
(
|
||||
var(--_list-item-three-line-container-height) -
|
||||
@ -401,17 +399,15 @@
|
||||
) / 2
|
||||
);
|
||||
|
||||
/*
|
||||
* Let it auto-layout so that we don't mess with the icons and supporting
|
||||
* text that is supposed to be top-aligned in three-line.
|
||||
*/
|
||||
// Let it auto-layout so that we don't mess with the icons and supporting
|
||||
// text that is supposed to be top-aligned in three-line.
|
||||
.with-three-line & {
|
||||
padding-block: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::slotted([data-variant='video-large']) {
|
||||
/* Min height is three-line height */
|
||||
// Min height is three-line height
|
||||
padding-block: calc(
|
||||
(
|
||||
var(--_list-item-three-line-container-height) -
|
||||
|
23
list/lib/listitem/forced-colors-styles.scss
Normal file
23
list/lib/listitem/forced-colors-styles.scss
Normal file
@ -0,0 +1,23 @@
|
||||
//
|
||||
// Copyright 2023 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
// go/keep-sorted start
|
||||
@use './list-item';
|
||||
// go/keep-sorted end
|
||||
|
||||
@media (forced-colors: active) {
|
||||
:host {
|
||||
@include list-item.theme(
|
||||
(
|
||||
list-item-disabled-label-text-color: GrayText,
|
||||
list-item-disabled-label-text-opacity: 1,
|
||||
list-item-disabled-leading-icon-color: GrayText,
|
||||
list-item-disabled-leading-icon-opacity: 1,
|
||||
list-item-disabled-trailing-icon-color: GrayText,
|
||||
list-item-disabled-trailing-icon-opacity: 1,
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
@ -6,6 +6,7 @@
|
||||
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
|
||||
import {styles as forcedColors} from './lib/listitem/forced-colors-styles.css.js';
|
||||
import {styles} from './lib/listitem/list-item-styles.css.js';
|
||||
import {ListItemLink} from './lib/listitemlink/list-item-link.js';
|
||||
|
||||
@ -56,5 +57,5 @@ declare global {
|
||||
*/
|
||||
@customElement('md-list-item-link')
|
||||
export class MdListItemLink extends ListItemLink {
|
||||
static override styles = [styles];
|
||||
static override styles = [styles, forcedColors];
|
||||
}
|
||||
|
@ -6,6 +6,7 @@
|
||||
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
|
||||
import {styles as forcedColors} from './lib/listitem/forced-colors-styles.css.js';
|
||||
import {ListItemEl as ListItem} from './lib/listitem/list-item.js';
|
||||
import {styles} from './lib/listitem/list-item-styles.css.js';
|
||||
|
||||
@ -57,5 +58,5 @@ declare global {
|
||||
*/
|
||||
@customElement('md-list-item')
|
||||
export class MdListItem extends ListItem {
|
||||
static override styles = [styles];
|
||||
static override styles = [styles, forcedColors];
|
||||
}
|
||||
|
@ -81,6 +81,7 @@ $_custom-property-prefix: 'menu';
|
||||
display: block;
|
||||
overflow: auto;
|
||||
min-width: inherit;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
&.has-overflow md-list {
|
||||
|
12
menu/lib/forced-colors-styles.scss
Normal file
12
menu/lib/forced-colors-styles.scss
Normal file
@ -0,0 +1,12 @@
|
||||
//
|
||||
// Copyright 2023 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.menu {
|
||||
border-style: solid;
|
||||
border-color: CanvasText;
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
@ -41,15 +41,11 @@ $_custom-property-prefix: 'menu';
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Set the ripple opacity to 0 if there is a submenu that is hovered.
|
||||
*/
|
||||
// Set the ripple opacity to 0 if there is a submenu that is hovered.
|
||||
.list-item:has(.submenu:hover) {
|
||||
/*
|
||||
Have to use ripple theme directly because :has selector in this case does
|
||||
not work in this case with the :has selector, thus we cannot override the
|
||||
custom props set in :host
|
||||
*/
|
||||
// Have to use ripple theme directly because :has selector in this case does
|
||||
// not work in this case with the :has selector, thus we cannot override the
|
||||
// custom props set in :host
|
||||
@include ripple.theme(
|
||||
(
|
||||
hover-opacity: 0,
|
||||
|
22
menu/lib/menuitem/forced-colors-styles.scss
Normal file
22
menu/lib/menuitem/forced-colors-styles.scss
Normal file
@ -0,0 +1,22 @@
|
||||
//
|
||||
// Copyright 2023 Google LLC
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
//
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.list-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Show double border only when selected, and the current list item does not
|
||||
// have a focus ring on it.
|
||||
:host([selected]) .list-item:not(:has(.focus-ring[visible]))::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
border: 3px double CanvasText;
|
||||
}
|
||||
}
|
@ -6,8 +6,10 @@
|
||||
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
|
||||
import {styles as listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';
|
||||
import {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';
|
||||
|
||||
import {styles as forcedColorsStyles} from './lib/menuitem/forced-colors-styles.css.js';
|
||||
import {styles} from './lib/menuitem/menu-item-styles.css.js';
|
||||
import {MenuItemLink} from './lib/menuitemlink/menu-item-link.js';
|
||||
|
||||
@ -40,5 +42,6 @@ declare global {
|
||||
*/
|
||||
@customElement('md-menu-item-link')
|
||||
export class MdMenuItemLink extends MenuItemLink {
|
||||
static override styles = [listItemStyles, styles];
|
||||
static override styles =
|
||||
[listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
|
||||
}
|
||||
|
@ -6,10 +6,12 @@
|
||||
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
|
||||
import {styles as listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';
|
||||
import {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';
|
||||
|
||||
import {styles} from './lib/menuitem/menu-item-styles.css.js';
|
||||
import {styles as forcedColorsStyles} from './lib/menuitem/forced-colors-styles.css.js';
|
||||
import {MenuItemEl} from './lib/menuitem/menu-item.js';
|
||||
import {styles} from './lib/menuitem/menu-item-styles.css.js';
|
||||
|
||||
export {ListItem} from '../list/lib/listitem/list-item.js';
|
||||
export {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';
|
||||
@ -37,5 +39,6 @@ declare global {
|
||||
*/
|
||||
@customElement('md-menu-item')
|
||||
export class MdMenuItem extends MenuItemEl {
|
||||
static override styles = [listItemStyles, styles];
|
||||
static override styles =
|
||||
[listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
|
||||
}
|
||||
|
@ -6,6 +6,7 @@
|
||||
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
|
||||
import {styles as forcedColors} from './lib/forced-colors-styles.css.js';
|
||||
import {Menu} from './lib/menu.js';
|
||||
import {styles} from './lib/menu-styles.css.js';
|
||||
|
||||
@ -63,5 +64,5 @@ declare global {
|
||||
*/
|
||||
@customElement('md-menu')
|
||||
export class MdMenu extends Menu {
|
||||
static override styles = [styles];
|
||||
static override styles = [styles, forcedColors];
|
||||
}
|
||||
|
@ -6,8 +6,10 @@
|
||||
|
||||
import {customElement} from 'lit/decorators.js';
|
||||
|
||||
import {styles as listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';
|
||||
import {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';
|
||||
|
||||
import {styles as forcedColorsStyles} from './lib/menuitem/forced-colors-styles.css.js';
|
||||
import {styles} from './lib/menuitem/menu-item-styles.css.js';
|
||||
import {SubMenuItem} from './lib/submenuitem/sub-menu-item.js';
|
||||
|
||||
@ -66,5 +68,6 @@ declare global {
|
||||
*/
|
||||
@customElement('md-sub-menu-item')
|
||||
export class MdSubMenuItem extends SubMenuItem {
|
||||
static override styles = [listItemStyles, styles];
|
||||
static override styles =
|
||||
[listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
|
||||
}
|
||||
|
@ -1,13 +1,13 @@
|
||||
{
|
||||
"capabilities": {
|
||||
"goog:chromeOptions": {
|
||||
"args": ["--window-position=0,0", "--window-size=3325,2215"]
|
||||
"args": ["--window-position=0,0", "--window-size=3400,2215"]
|
||||
},
|
||||
"moz:firefoxOptions": {
|
||||
"args": ["-width=3325","-height=2215"]
|
||||
"args": ["-width=3400","-height=2215"]
|
||||
}
|
||||
},
|
||||
"extension": {
|
||||
"xvfbResolution": "3325x2215x24"
|
||||
"xvfbResolution": "3400x2215x24"
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user