mirror of
https://github.com/material-components/material-web.git
synced 2024-09-19 09:37:36 +03:00
docs(catalog): refactor catalog to use material panel layout
PiperOrigin-RevId: 537973428
This commit is contained in:
Elliott Marquez
Copybara-Service
parent
88b5cfeb21
commit
f403d42807
@ -40,7 +40,6 @@ figure {
|
||||
|
||||
catalog-component-header img {
|
||||
height: var(--catalog-header-image-height, 50%);
|
||||
width: var(--catalog-header-image-width, 100%);
|
||||
}
|
||||
|
||||
.figure-wrapper {
|
||||
@ -97,7 +96,7 @@ tr th:last-of-type {
|
||||
th {
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
text-shadow: 0 1px 1px var(--md-sys-color-surface-container-lowest);
|
||||
color: var(--md-sys-color-on-surface-container);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
@ -111,19 +110,19 @@ th {
|
||||
}
|
||||
|
||||
tr th:first-of-type {
|
||||
border-start-start-radius: 28px;
|
||||
border-start-start-radius: var(--catalog-shape-xl);
|
||||
}
|
||||
|
||||
tr th:last-of-type {
|
||||
border-start-end-radius: 28px;
|
||||
border-start-end-radius: var(--catalog-shape-xl);
|
||||
}
|
||||
|
||||
tr:last-of-type td:first-of-type {
|
||||
border-end-start-radius: 28px;
|
||||
border-end-start-radius: var(--catalog-shape-xl);
|
||||
}
|
||||
|
||||
tr:last-of-type td:last-of-type {
|
||||
border-end-end-radius: 28px;
|
||||
border-end-end-radius: var(--catalog-shape-xl);
|
||||
}
|
||||
|
||||
/* Hides offscreen accesible text for h1,2,3 hover links. */
|
||||
@ -158,7 +157,7 @@ a .offscreen {
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
inset-inline-start: calc(-1 * var(--_content-padding) + 4px);
|
||||
inset-inline-start: calc(-1 * var(--catalog-spacing-xl) + 4px);
|
||||
opacity: 0;
|
||||
font-size: calc(1.5em - 4px);
|
||||
transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
@ -26,12 +26,8 @@
|
||||
|
||||
:root {
|
||||
font-family: 'Google Sans', Roboto, system-ui;
|
||||
background-color: var(--md-sys-color-background);
|
||||
color: var(--md-sys-color-on-background);
|
||||
--catalog-top-app-bar-height: 48px;
|
||||
--catalog-top-app-bar-padding-block: 12px;
|
||||
scroll-padding-block-start: calc(var(--catalog-top-app-bar-height) + var(--catalog-top-app-bar-padding-block) * 2);
|
||||
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
/* These values are copied from mio */
|
||||
--catalog-display-xl-font-size: 88px;
|
||||
--catalog-display-m-font-size: 45px;
|
||||
@ -40,6 +36,17 @@
|
||||
--catalog-title-s-font-size: 14px;
|
||||
--catalog-body-l-font-size: 16px;
|
||||
--catalog-body-m-font-size: 14px;
|
||||
--catalog-shape-xl: 28px;
|
||||
--catalog-shape-l: 16px;
|
||||
--catalog-shape-m: 12px;
|
||||
--catalog-shape-s: 8px;
|
||||
--catalog-shape-xs: 4px;
|
||||
--catalog-spacing-xl: 28px;
|
||||
--catalog-spacing-l: 16px;
|
||||
--catalog-spacing-m: 12px;
|
||||
--catalog-spacing-s: 8px;
|
||||
--catalog-top-app-bar-height: calc(48px + 2 * var(--catalog-spacing-m));
|
||||
scroll-padding-block-start: calc(var(--catalog-top-app-bar-height) + var(--catalog-top-app-bar-padding-block) * 2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@ -48,6 +55,8 @@
|
||||
--catalog-title-l-font-size: 16px;
|
||||
--catalog-body-l-font-size: 14px;
|
||||
--catalog-body-m-font-size: 12px;
|
||||
/* Mostly to accommodate content padding on small screens */
|
||||
--catalog-spacing-xl: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,15 +79,27 @@ nav-drawer md-list-item-link[selected] {
|
||||
--md-list-item-list-item-container-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
nav-drawer md-list-item-link[selected] {
|
||||
border: 4px double CanvasText;
|
||||
}
|
||||
|
||||
nav-drawer md-list-item-link {
|
||||
border-radius: var(--catalog-shape-xl);
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
md-list {
|
||||
--md-list-container-color: transparent;
|
||||
--md-list-item-list-item-container-color: transparent;
|
||||
display: block;
|
||||
margin-inline: 12px;
|
||||
margin-inline: var(--catalog-spacing-m);
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
md-list-item-link {
|
||||
margin-block: 12px;
|
||||
margin-block: var(--catalog-spacing-m);
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@ -7,4 +7,5 @@
|
||||
h1,
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@ code,
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
text-shadow: 0 1px 1px var(--md-sys-color-background);
|
||||
text-shadow: 0 1px 1px var(--md-sys-color-surface);
|
||||
font-family: 'Google Sans Mono', Menlo, Monaco, "Courier New", monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
|
||||
@ -27,8 +27,11 @@ export class CatalogComponentHeaderTitle extends LitElement {
|
||||
justify-content: center;
|
||||
border-radius: var(--catalog-image-border-radius);
|
||||
padding: 56px;
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
color: var(--md-sys-color-on-surface-container);
|
||||
/* It has no border so we need it to be a different color from the top app
|
||||
* bar and nav drawer.
|
||||
*/
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
|
||||
slot::slotted(h1) {
|
||||
|
||||
@ -29,7 +29,7 @@ export class CatalogComponentHeader extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
--catalog-image-border-radius: 24px;
|
||||
--catalog-image-border-radius: var(--catalog-shape-xl);
|
||||
container: host / inline-size;
|
||||
position: relative;
|
||||
}
|
||||
@ -56,7 +56,8 @@ export class CatalogComponentHeader extends LitElement {
|
||||
}
|
||||
|
||||
.image {
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
/* Color needs to differ from top-app-bar and sidebar */
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
border-radius: var(--catalog-image-border-radius);
|
||||
overflow: hidden;
|
||||
margin-block-start: 16px;
|
||||
@ -78,7 +79,8 @@ export class CatalogComponentHeader extends LitElement {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@container (width > 1100px) {
|
||||
/* fit ipad pro at least */
|
||||
@container (width > 1000px) {
|
||||
div {
|
||||
display: grid;
|
||||
grid-gap: 8px;
|
||||
|
||||
@ -21,8 +21,8 @@ import {SignalElement} from '../signals/signal-element.js';
|
||||
* widths, and position itself inline with the page at wider page widths. Most
|
||||
* importantly, this sidebar is SSR compatible.
|
||||
*/
|
||||
@customElement('nav-drawer') export class NavDrawer extends SignalElement
|
||||
(LitElement) {
|
||||
@customElement('nav-drawer')
|
||||
export class NavDrawer extends SignalElement(LitElement) {
|
||||
/**
|
||||
* Whether or not the side drawer is collapsible or inline.
|
||||
*/
|
||||
@ -36,11 +36,12 @@ import {SignalElement} from '../signals/signal-element.js';
|
||||
const drawerContentOpacityDuration = showModal ? 300 : 150;
|
||||
const scrimOpacityDuration = 150;
|
||||
|
||||
const drawerSlideAnimationEasing =
|
||||
showModal ? EASING.EMPHASIZED : EASING.EMPHASIZED_ACCELERATE;
|
||||
const drawerSlideAnimationEasing = showModal
|
||||
? EASING.EMPHASIZED
|
||||
: EASING.EMPHASIZED_ACCELERATE;
|
||||
|
||||
return html`
|
||||
<div class="root">
|
||||
<div class="root" data-animation-speed=${showModal ? 'long' : 'short'}>
|
||||
<slot name="top-app-bar"></slot>
|
||||
<div class="body ${drawerOpenSignal.value ? 'open' : ''}">
|
||||
<div class="spacer" ?inert=${inertSidebarSignal.value}>
|
||||
@ -80,8 +81,13 @@ import {SignalElement} from '../signals/signal-element.js';
|
||||
></slot>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="content" ?inert=${showModal || inertContentSignal.value}>
|
||||
<slot name="app-content"></slot>
|
||||
<div class="pane">
|
||||
<div
|
||||
class="content"
|
||||
?inert=${showModal || inertContentSignal.value}
|
||||
>
|
||||
<slot name="app-content"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -109,17 +115,14 @@ import {SignalElement} from '../signals/signal-element.js';
|
||||
:host {
|
||||
--_max-width: 1760px;
|
||||
--_drawer-width: var(--catalog-drawer-width, 300px);
|
||||
--_item-border-radius: var(--md-dialog-container-shape, 28px);
|
||||
--_border-radius: calc(var(--_item-border-radius) + 12px);
|
||||
--_content-padding: 24px;
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
::slotted(*) {
|
||||
--md-list-item-list-item-container-shape: var(--_item-border-radius);
|
||||
--md-focus-ring-shape: var(--_item-border-radius);
|
||||
--md-list-item-list-item-container-shape: var(--catalog-shape-xl);
|
||||
--md-focus-ring-shape: var(--catalog-shape-xl);
|
||||
}
|
||||
|
||||
.body {
|
||||
@ -138,12 +141,37 @@ import {SignalElement} from '../signals/signal-element.js';
|
||||
max-width: var(--_drawer-width);
|
||||
}
|
||||
|
||||
.pane {
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
/* Explicit height to make overflow work */
|
||||
height: calc(
|
||||
100dvh - var(--catalog-top-app-bar-height) - var(--catalog-spacing-xl)
|
||||
);
|
||||
background-color: var(--md-sys-color-surface);
|
||||
border-radius: var(--catalog-shape-xl);
|
||||
padding-block: var(--catalog-spacing-xl);
|
||||
/* no margin-inline-start because that's covered by the sidebar */
|
||||
margin-inline-end: var(--catalog-spacing-xl);
|
||||
/* emphasized – duration matching render fn for sidebar */
|
||||
transition: 0.5s cubic-bezier(0.3, 0, 0, 1);
|
||||
transition-property: margin, height, border-radius;
|
||||
}
|
||||
|
||||
[data-animation-speed='short'] .pane {
|
||||
/* duration matching render function for sidebar */
|
||||
transition-duration: 0.15s;
|
||||
/* emphasize-accelerate */
|
||||
transition-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding-inline: var(--_content-padding);
|
||||
padding-inline: var(--catalog-spacing-xl);
|
||||
max-width: calc(100vw - var(--_drawer-width));
|
||||
}
|
||||
|
||||
@ -157,13 +185,9 @@ import {SignalElement} from '../signals/signal-element.js';
|
||||
transition: transform 0.5s cubic-bezier(0.3, 0, 0, 1);
|
||||
position: fixed;
|
||||
isolation: isolate;
|
||||
inset: calc(
|
||||
var(--catalog-top-app-bar-height) + 2 * var(--catalog-top-app-bar-padding-block)
|
||||
)
|
||||
0 0 0;
|
||||
inset: var(--catalog-top-app-bar-height) 0 0 0;
|
||||
z-index: 12;
|
||||
border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
|
||||
background-color: var(--md-sys-color-surface);
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
}
|
||||
|
||||
aside slot {
|
||||
@ -174,12 +198,6 @@ import {SignalElement} from '../signals/signal-element.js';
|
||||
background-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.32));
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
:host {
|
||||
--_content-padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.spacer {
|
||||
min-width: 0px;
|
||||
@ -187,7 +205,7 @@ import {SignalElement} from '../signals/signal-element.js';
|
||||
|
||||
.content {
|
||||
max-width: 100vw;
|
||||
padding-inline: var(--_content-padding);
|
||||
padding-inline: var(--catalog-spacing-xl);
|
||||
}
|
||||
|
||||
.scrim {
|
||||
@ -198,6 +216,11 @@ import {SignalElement} from '../signals/signal-element.js';
|
||||
aside {
|
||||
transition: unset;
|
||||
transform: translateX(-100%);
|
||||
border-radius: 0 var(--catalog-shape-xl) var(--catalog-shape-xl) 0;
|
||||
}
|
||||
|
||||
.pane {
|
||||
margin-inline: var(--catalog-spacing-xl);
|
||||
}
|
||||
|
||||
.open aside {
|
||||
@ -216,20 +239,77 @@ import {SignalElement} from '../signals/signal-element.js';
|
||||
inset: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
|
||||
.root:has(.open) {
|
||||
--top-app-bar-color-background: var(--md-sys-color-surface-variant);
|
||||
--top-app-bar-color-on-background: var(
|
||||
--md-sys-color-on-surface-variant
|
||||
@media (max-width: 600px) {
|
||||
.pane {
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* On desktop, make the scrollbars less blocky so you can see the border
|
||||
* radius of the pane. On most mobile platforms, these scrollbars are hidden
|
||||
* by default. It'll still unfortunately render on top of the border radius.
|
||||
*/
|
||||
@media (pointer: fine) {
|
||||
:host {
|
||||
--_scrollbar-width: 8px;
|
||||
}
|
||||
|
||||
.pane {
|
||||
/* firefox */
|
||||
scrollbar-color: var(--md-sys-color-primary) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.content {
|
||||
/* adjust for the scrollbar width */
|
||||
padding-inline-end: calc(
|
||||
var(--catalog-spacing-xl) - var(--_scrollbar-width)
|
||||
);
|
||||
}
|
||||
|
||||
/* Chromium + Safari */
|
||||
.pane::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
width: var(--_scrollbar-width);
|
||||
}
|
||||
|
||||
.pane::-webkit-scrollbar-thumb {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border-radius: calc(var(--_scrollbar-width) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
aside {
|
||||
box-sizing: border-box;
|
||||
.pane {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
aside {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
|
||||
.scrim {
|
||||
background-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.75));
|
||||
}
|
||||
}
|
||||
|
||||
@media (pointer: fine) {
|
||||
.pane {
|
||||
/* firefox */
|
||||
scrollbar-color: CanvasText transparent;
|
||||
}
|
||||
|
||||
.pane::-webkit-scrollbar-thumb {
|
||||
/* Chromium + Safari */
|
||||
background-color: CanvasText;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -205,11 +205,11 @@ export class ThemeChanger extends LitElement {
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 12px 24px;
|
||||
margin: var(--catalog-spacing-m) var(--catalog-spacing-l);
|
||||
}
|
||||
|
||||
:host > * {
|
||||
margin-block-end: 24px;
|
||||
margin-block-end: var(--catalog-spacing-l);
|
||||
}
|
||||
|
||||
:host > *:last-child {
|
||||
@ -223,16 +223,13 @@ export class ThemeChanger extends LitElement {
|
||||
|
||||
.sliders,
|
||||
#hex {
|
||||
padding-inline: 12px;
|
||||
border-radius: 22px;
|
||||
padding-inline: var(--catalog-spacing-m);
|
||||
border-radius: var(--catalog-shape-l);
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
|
||||
/* Default track color is inaccessible in a secondary-container */
|
||||
--md-slider-inactive-track-color: var(
|
||||
--md-sys-color-on-secondary-container
|
||||
);
|
||||
/* Default track color is inaccessible in a surface-variant */
|
||||
--md-slider-inactive-track-color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
|
||||
hct-slider {
|
||||
@ -263,7 +260,7 @@ export class ThemeChanger extends LitElement {
|
||||
border: 1px solid var(--md-sys-color-on-secondary-container);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
#hex .input-wrapper,
|
||||
#hex md-focus-ring {
|
||||
border-radius: 50%;
|
||||
|
||||
@ -20,9 +20,7 @@ import {SignalElement} from '../signals/signal-element.js';
|
||||
import {materialDesign} from '../svg/material-design-logo.js';
|
||||
|
||||
/**
|
||||
* Top app bar of the catalog. It changes elevation and "floats" when the
|
||||
* "is-sticky" class is set on it. (this is currently done in
|
||||
* pages/global.ts)
|
||||
* Top app bar of the catalog.
|
||||
*/
|
||||
@customElement('top-app-bar') export class TopAppBar extends SignalElement
|
||||
(LitElement) {
|
||||
@ -117,41 +115,27 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
||||
header {
|
||||
display: block;
|
||||
height: var(--catalog-top-app-bar-height);
|
||||
padding: var(--catalog-top-app-bar-padding-block) 8px;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
inset: 0 0 auto 0;
|
||||
padding-block-start: var(--catalog-top-app-bar-padding-block);
|
||||
background-color: var(
|
||||
--top-app-bar-color-background,
|
||||
var(--md-sys-color-background)
|
||||
);
|
||||
color: var(
|
||||
--top-app-bar-color-on-background,
|
||||
var(--md-sys-color-on-background)
|
||||
);
|
||||
transition: background 0.3s linear;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-block-start: var(--catalog-spacing-m);
|
||||
box-sizing: border-box;
|
||||
padding: var(--catalog-spacing-m) var(--catalog-spacing-s);
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
.default-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:host(.is-sticky) header {
|
||||
background-color: var(
|
||||
--top-app-bar-color-background,
|
||||
var(--md-sys-color-surface-container-highest)
|
||||
);
|
||||
color: var(
|
||||
--top-app-bar-color-on-background,
|
||||
var(--md-sys-color-on-surface-container)
|
||||
);
|
||||
}
|
||||
|
||||
md-standard-icon-button:not(:defined) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@ -200,12 +184,6 @@ import {materialDesign} from '../svg/material-design-logo.js';
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
header {
|
||||
border-block-end: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -14,31 +14,6 @@
|
||||
|
||||
import {changeColor, changeColorAndMode, changeColorMode, getCurrentMode, getCurrentSeedColor, getCurrentThemeString, getLastSavedAutoColorMode, isModeDark} from '../utils/theme.js';
|
||||
|
||||
/**
|
||||
* Determines whether the top app bar and nav drawers should be sticky, and then
|
||||
* listens to scroll events to determine at runtime.
|
||||
*/
|
||||
function applyStickyScrollListener() {
|
||||
const topAppBar = document.querySelector('top-app-bar')!;
|
||||
const navDrawer = document.querySelector('nav-drawer')!;
|
||||
|
||||
const updateSticky = () => {
|
||||
if (globalThis.scrollY > 0) {
|
||||
topAppBar.classList.add('is-sticky');
|
||||
navDrawer.classList.add('is-sticky');
|
||||
} else {
|
||||
topAppBar.classList.remove('is-sticky');
|
||||
navDrawer.classList.remove('is-sticky');
|
||||
}
|
||||
};
|
||||
|
||||
globalThis.addEventListener('scroll', () => {
|
||||
updateSticky();
|
||||
}, {passive: true});
|
||||
|
||||
updateSticky();
|
||||
}
|
||||
|
||||
/**
|
||||
* Applies theme-based event listeners such as changing color, mode, and
|
||||
* listening to system mode changes.
|
||||
@ -99,7 +74,6 @@ function determinePageNavigationAutoMode() {
|
||||
}
|
||||
}
|
||||
|
||||
applyStickyScrollListener();
|
||||
applyColorThemeListeners();
|
||||
initializeTheme();
|
||||
determinePageNavigationAutoMode();
|
||||
|
||||
@ -222,7 +222,7 @@ export class StoryKnobPanel extends LitElement {
|
||||
background-color: white;
|
||||
--mdc-typography-headline-color: black;
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
color: var(--md-sys-color-on-surface-container);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
--md-elevation-level: 1;
|
||||
position: relative;
|
||||
}
|
||||
@ -260,7 +260,7 @@ export class StoryKnobPanel extends LitElement {
|
||||
|
||||
:host([draggable]) {
|
||||
background-color: var(--md-sys-color-surface-container-high);
|
||||
color: var(--md-sys-color-on-surface-container-high);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
--md-elevation-level: 2;
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
|
||||
@ -18,8 +18,8 @@ SPDX-License-Identifier: Apache-2.0
|
||||
/>
|
||||
<style>
|
||||
:root {
|
||||
background-color: var(--md-sys-color-background);
|
||||
color: var(--md-sys-color-on-background);
|
||||
background-color: var(--md-sys-color-surface);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
font-family: "Google Sans", system-ui;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user