/* ========================================================================== M3 COMPONENTS — Material Design 3 component layer -------------------------------------------------------------------------- Companion to `m3.css` (the token layer). This file NEVER declares a colour literal: every colour, shape, elevation, motion and typescale value is read from the official `--md-sys-*` custom properties, so light theme, dark theme, contrast modes and palette changes all flow through automatically. AUTHORING CONVENTIONS USED THROUGHOUT ------------------------------------- • State layers are painted as a `background-image` translucency layer over the component's own `background-color`. Backgrounds paint *below* content, so this needs no extra element and never covers labels or icons. The opacity is a registered `@property` (`--md-state-opacity`) so it can be smoothly transitioned. • `::before` is reserved for the invisible 48×48 minimum touch-target expansion on components whose visual box is smaller than 48px. • `::after` is reserved for decorative affordances (selected checkmarks, active indicators, switch icons). • Everything uses CSS logical properties, so RTL works for free. • Every interactive component exposes a 3px `secondary` focus ring at 2px offset — the M3 focus indicator spec. TABLE OF CONTENTS ----------------- 00 Registered properties, primitives & shared machinery 01 Elevation + tonal surface helpers .md-surface-1 … 5 02 Buttons .md-button 03 Icon buttons .md-icon-button 04 FAB / Extended FAB .md-fab 05 Cards .md-card 06 Chips .md-chip 07 Top app bar .md-top-app-bar 08 Navigation rail / drawer / bar / item .md-nav-* 09 Tabs .md-tabs 10 Segmented button .md-segmented-button 11 Lists .md-list 12 Text fields .md-text-field 13 Switch .md-switch 14 Slider .md-slider 15 Dialog .md-dialog 16 Snackbar .md-snackbar 17 Progress indicators .md-linear/circular-progress 18 Divider .md-divider 19 Badge .md-badge 20 Tooltip .md-tooltip 21 Reduced motion / forced colors / print ========================================================================== */ /* ========================================================================== 00 — REGISTERED PROPERTIES, PRIMITIVES & SHARED MACHINERY ========================================================================== */ /* Registering these makes them animatable/transitionable and type-safe. */ @property --md-state-opacity { syntax: ""; inherits: false; initial-value: 0; } @property --md-slider-fraction { syntax: ""; inherits: false; initial-value: 0; } @property --md-progress-fraction { syntax: ""; inherits: false; initial-value: 0; } @property --md-progress-arc { syntax: ""; inherits: false; initial-value: 0.08; } :root { /* ---- Typescale shorthands ------------------------------------------- `font: / ` composed from the sys typescale tokens. Tracking (letter-spacing) is applied alongside because it is not part of the `font` shorthand. */ --md-type-display-large: var(--md-sys-typescale-display-large-weight) var(--md-sys-typescale-display-large-size)/var(--md-sys-typescale-display-large-line-height) var(--md-sys-typescale-display-large-font); --md-type-display-medium: var(--md-sys-typescale-display-medium-weight) var(--md-sys-typescale-display-medium-size)/var(--md-sys-typescale-display-medium-line-height) var(--md-sys-typescale-display-medium-font); --md-type-display-small: var(--md-sys-typescale-display-small-weight) var(--md-sys-typescale-display-small-size)/var(--md-sys-typescale-display-small-line-height) var(--md-sys-typescale-display-small-font); --md-type-headline-large: var(--md-sys-typescale-headline-large-weight) var(--md-sys-typescale-headline-large-size)/var(--md-sys-typescale-headline-large-line-height) var(--md-sys-typescale-headline-large-font); --md-type-headline-medium: var(--md-sys-typescale-headline-medium-weight) var(--md-sys-typescale-headline-medium-size)/var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-headline-medium-font); --md-type-headline-small: var(--md-sys-typescale-headline-small-weight) var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line-height) var(--md-sys-typescale-headline-small-font); --md-type-title-large: var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font); --md-type-title-medium: var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font); --md-type-title-small: var(--md-sys-typescale-title-small-weight) var(--md-sys-typescale-title-small-size)/var(--md-sys-typescale-title-small-line-height) var(--md-sys-typescale-title-small-font); --md-type-body-large: var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font); --md-type-body-medium: var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font); --md-type-body-small: var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-body-small-font); --md-type-label-large: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font); --md-type-label-medium: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font); --md-type-label-small: var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font); /* ---- Elevation shadow renderings ------------------------------------ In the canonical M3 token set `--md-sys-elevation-level{0..5}` is a *dp scalar* (0/1/3/6/8/12), not a ready-made shadow. These are the two-layer key + ambient shadows those dp values render to, tinted with `--md-sys-color-shadow` so dark theme stays correct. If your token layer already ships shadow strings, simply override: --md-comp-elevation-1: var(--md-sys-elevation-level1); */ --md-shadow-key: color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent); --md-shadow-ambient: color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); --md-comp-elevation-0: 0 0 0 0 transparent; --md-comp-elevation-1: 0 1px 2px 0 var(--md-shadow-key), 0 1px 3px 1px var(--md-shadow-ambient); --md-comp-elevation-2: 0 1px 2px 0 var(--md-shadow-key), 0 2px 6px 2px var(--md-shadow-ambient); --md-comp-elevation-3: 0 1px 3px 0 var(--md-shadow-key), 0 4px 8px 3px var(--md-shadow-ambient); --md-comp-elevation-4: 0 2px 3px 0 var(--md-shadow-key), 0 6px 10px 4px var(--md-shadow-ambient); --md-comp-elevation-5: 0 4px 4px 0 var(--md-shadow-key), 0 8px 12px 6px var(--md-shadow-ambient); /* ---- Disabled recipe (M3: 12% container / 38% content) --------------- */ --md-disabled-container: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); --md-disabled-content: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); /* ---- Icon glyphs as masks (colour comes from `background-color`) ----- No `fill` attribute is present, so the SVG renders opaque black, which is exactly what a mask needs. No colour is hard-coded by doing this. */ --md-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E"); --md-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z'/%3E%3C/svg%3E"); --md-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); /* ---- Component-level knobs authors may override ---------------------- */ --md-focus-ring-width: 3px; --md-focus-ring-offset: 2px; --md-focus-ring-color: var(--md-sys-color-secondary); } /* Predictable box model for everything in this layer. */ [class*="md-"], [class*="md-"]::before, [class*="md-"]::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- Shared state-layer machinery. Sets a transparent tint layer above the background colour and below the content. Components only need to declare `--md-state-layer-color`. -------------------------------------------------------------------------- */ .md-button, .md-icon-button, .md-fab, .md-chip, .md-nav-item, .md-tab, .md-segmented-button__segment, .md-list-item--interactive, a.md-list-item, button.md-list-item, label.md-list-item, a.md-card, button.md-card, .md-card--interactive, .md-snackbar__action, .md-dialog__close { --md-state-layer-color: var(--md-sys-color-on-surface); background-image: linear-gradient( color-mix(in srgb, var(--md-state-layer-color) calc(var(--md-state-opacity) * 100%), transparent) 0 0); transition: --md-state-opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } /* Hover → focus → pressed. Declared in this order so `:active` wins. */ .md-button:hover, .md-icon-button:hover, .md-fab:hover, .md-chip:hover, .md-nav-item:hover, .md-tab:hover, .md-segmented-button__segment:hover, .md-list-item--interactive:hover, a.md-list-item:hover, button.md-list-item:hover, label.md-list-item:hover, a.md-card:hover, button.md-card:hover, .md-card--interactive:hover, .md-snackbar__action:hover, .md-dialog__close:hover { --md-state-opacity: var(--md-sys-state-hover-opacity); } .md-button:focus-visible, .md-icon-button:focus-visible, .md-fab:focus-visible, .md-chip:focus-visible, .md-nav-item:focus-visible, .md-tab:focus-visible, .md-segmented-button__segment:focus-visible, .md-list-item--interactive:focus-visible, a.md-list-item:focus-visible, button.md-list-item:focus-visible, label.md-list-item:focus-visible, a.md-card:focus-visible, button.md-card:focus-visible, .md-card--interactive:focus-visible, .md-snackbar__action:focus-visible, .md-dialog__close:focus-visible { --md-state-opacity: var(--md-sys-state-focus-opacity); } .md-button:active, .md-icon-button:active, .md-fab:active, .md-chip:active, .md-nav-item:active, .md-tab:active, .md-segmented-button__segment:active, .md-list-item--interactive:active, a.md-list-item:active, button.md-list-item:active, label.md-list-item:active, a.md-card:active, button.md-card:active, .md-card--interactive:active, .md-snackbar__action:active, .md-dialog__close:active { --md-state-opacity: var(--md-sys-state-pressed-opacity); } .md-button[draggable="true"]:active, .md-chip[draggable="true"]:active, .md-fab[draggable="true"]:active, a.md-card[draggable="true"]:active, .md-list-item[draggable="true"]:active { --md-state-opacity: var(--md-sys-state-dragged-opacity); } /* -------------------------------------------------------------------------- Shared focus indicator — 3dp `secondary` ring, 2dp offset (M3 spec). -------------------------------------------------------------------------- */ .md-button:focus-visible, .md-icon-button:focus-visible, .md-fab:focus-visible, .md-chip:focus-visible, .md-nav-item:focus-visible, .md-tab:focus-visible, .md-segmented-button__segment:focus-visible, .md-list-item:focus-visible, .md-card:focus-visible, .md-snackbar__action:focus-visible, .md-dialog__close:focus-visible, .md-top-app-bar__leading:focus-visible, .md-top-app-bar__trailing > :focus-visible, .md-slider:focus-visible, .md-tooltip-anchor:focus-visible { outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color); outline-offset: var(--md-focus-ring-offset); /* Keep the ring above adjacent siblings (segmented buttons, tabs, lists). */ z-index: 2; } /* Never show the legacy focus ring when focus came from a pointer. */ .md-button:focus:not(:focus-visible), .md-icon-button:focus:not(:focus-visible), .md-fab:focus:not(:focus-visible), .md-chip:focus:not(:focus-visible), .md-nav-item:focus:not(:focus-visible), .md-tab:focus:not(:focus-visible), .md-segmented-button__segment:focus:not(:focus-visible), .md-list-item:focus:not(:focus-visible), .md-card:focus:not(:focus-visible), .md-slider:focus:not(:focus-visible) { outline: none; } /* -------------------------------------------------------------------------- Shared 48×48 minimum touch target. The visual box stays 40px (or 32px for chips); `::before` grows the hit area symmetrically without affecting layout. -------------------------------------------------------------------------- */ .md-button::before, .md-icon-button::before, .md-chip::before, .md-segmented-button__segment::before, .md-tab::before, .md-fab--small::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; inline-size: max(100%, 48px); block-size: max(100%, 48px); /* Invisible, but still receives pointer events. */ background: transparent; pointer-events: auto; } /* -------------------------------------------------------------------------- Shared icon slot. Works with inline SVG, , and icon fonts (Material Symbols / Material Icons ligature spans). -------------------------------------------------------------------------- */ .md-icon, .md-button__icon, .md-chip__icon, .md-fab__icon, .md-list-item__leading-icon, .md-nav-item__glyph, .md-tab__icon, .md-segmented-button__icon, .md-text-field__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 1em; block-size: 1em; font-size: 24px; line-height: 1; /* Material Symbols variable-font axes. */ font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; -webkit-user-select: none; user-select: none; } .md-icon > svg, .md-button__icon > svg, .md-chip__icon > svg, .md-fab__icon > svg, .md-list-item__leading-icon > svg, .md-nav-item__glyph > svg, .md-tab__icon > svg, .md-segmented-button__icon > svg, .md-text-field__icon > svg, .md-icon > img, .md-button__icon > img { inline-size: 100%; block-size: 100%; display: block; fill: currentColor; } /* Screen-reader-only helper for visually hidden inputs/labels. */ .md-visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== 01 — ELEVATION + TONAL SURFACE HELPERS M3 expresses elevation *twice*: with a shadow AND with a surface tone. These helpers apply both, matched, so a "level 3" surface always looks the same everywhere and is correct in dark theme (where tone does the work). ========================================================================== */ .md-surface-0, .md-surface-1, .md-surface-2, .md-surface-3, .md-surface-4, .md-surface-5 { color: var(--md-sys-color-on-surface); transition: box-shadow var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized), background-color var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard); } .md-surface-0 { background-color: var(--md-sys-color-surface); box-shadow: var(--md-comp-elevation-0); } .md-surface-1 { background-color: var(--md-sys-color-surface-container-low); box-shadow: var(--md-comp-elevation-1); } .md-surface-2 { background-color: var(--md-sys-color-surface-container); box-shadow: var(--md-comp-elevation-2); } .md-surface-3 { background-color: var(--md-sys-color-surface-container-high); box-shadow: var(--md-comp-elevation-3); } .md-surface-4 { background-color: var(--md-sys-color-surface-container-high); box-shadow: var(--md-comp-elevation-4); } .md-surface-5 { background-color: var(--md-sys-color-surface-container-highest);box-shadow: var(--md-comp-elevation-5); } /* Opt-in bridge: if your token layer publishes `--md-sys-elevation-level{0..5}` as ready-made `box-shadow` strings rather than the canonical dp scalars, add `class="md-use-sys-elevation"` to and every component switches over to them. Kept opt-in because a dp scalar is not a valid box-shadow and would silently erase every shadow in the sheet. */ .md-use-sys-elevation { --md-comp-elevation-0: var(--md-sys-elevation-level0); --md-comp-elevation-1: var(--md-sys-elevation-level1); --md-comp-elevation-2: var(--md-sys-elevation-level2); --md-comp-elevation-3: var(--md-sys-elevation-level3); --md-comp-elevation-4: var(--md-sys-elevation-level4); --md-comp-elevation-5: var(--md-sys-elevation-level5); } /* Shadow-only variants, for when the tone is set by something else. */ .md-elevation-0 { box-shadow: var(--md-comp-elevation-0); } .md-elevation-1 { box-shadow: var(--md-comp-elevation-1); } .md-elevation-2 { box-shadow: var(--md-comp-elevation-2); } .md-elevation-3 { box-shadow: var(--md-comp-elevation-3); } .md-elevation-4 { box-shadow: var(--md-comp-elevation-4); } .md-elevation-5 { box-shadow: var(--md-comp-elevation-5); } /* Tone-only variants. */ .md-tone-lowest { background-color: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); } .md-tone-low { background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); } .md-tone { background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); } .md-tone-high { background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); } .md-tone-highest { background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); } .md-tone-dim { background-color: var(--md-sys-color-surface-dim); color: var(--md-sys-color-on-surface); } .md-tone-bright { background-color: var(--md-sys-color-surface-bright); color: var(--md-sys-color-on-surface); } /* ========================================================================== 02 — BUTTONS 40dp tall, fully rounded, 24dp horizontal padding (16dp on the icon side), 18dp icons with an 8dp gap, label-large type. ========================================================================== */ .md-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; block-size: 40px; min-inline-size: 48px; padding-inline: 24px; padding-block: 0; border: none; border-radius: var(--md-sys-shape-corner-full); font: var(--md-type-label-large); letter-spacing: var(--md-sys-typescale-label-large-tracking); text-align: center; text-decoration: none; white-space: nowrap; background-color: transparent; color: var(--md-sys-color-primary); --md-state-layer-color: var(--md-sys-color-primary); cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; vertical-align: middle; box-shadow: var(--md-comp-elevation-0); } /* Content sits above the touch-target pseudo-element. */ .md-button > * { position: relative; z-index: 1; } .md-button__icon, .md-button > svg, .md-button > img { font-size: 18px; inline-size: 18px; block-size: 18px; } .md-button__label { display: inline-block; overflow: hidden; text-overflow: ellipsis; } /* Asymmetric padding when an icon leads or trails the label. */ .md-button:has(> .md-button__icon:first-child), .md-button:has(> svg:first-child), .md-button:has(> img:first-child), .md-button:has(> .md-icon:first-child) { padding-inline-start: 16px; } .md-button:has(> .md-button__icon:last-child), .md-button:has(> svg:last-child), .md-button:has(> img:last-child), .md-button:has(> .md-icon:last-child) { padding-inline-end: 16px; } /* ---- Filled (highest emphasis) ------------------------------------------ */ .md-button--filled { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); --md-state-layer-color: var(--md-sys-color-on-primary); } .md-button--filled:hover { box-shadow: var(--md-comp-elevation-1); } .md-button--filled:active, .md-button--filled:focus-visible { box-shadow: var(--md-comp-elevation-0); } /* ---- Filled tonal ------------------------------------------------------- */ .md-button--tonal { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); --md-state-layer-color: var(--md-sys-color-on-secondary-container); } .md-button--tonal:hover { box-shadow: var(--md-comp-elevation-1); } .md-button--tonal:active, .md-button--tonal:focus-visible { box-shadow: var(--md-comp-elevation-0); } /* ---- Elevated ----------------------------------------------------------- */ .md-button--elevated { background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-primary); --md-state-layer-color: var(--md-sys-color-primary); box-shadow: var(--md-comp-elevation-1); } .md-button--elevated:hover { box-shadow: var(--md-comp-elevation-2); } .md-button--elevated:active, .md-button--elevated:focus-visible { box-shadow: var(--md-comp-elevation-1); } /* ---- Outlined ----------------------------------------------------------- */ .md-button--outlined { background-color: transparent; color: var(--md-sys-color-primary); --md-state-layer-color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); /* Keep the 40dp height with the border included. */ padding-block: 0; } .md-button--outlined:active { border-color: var(--md-sys-color-outline); } .md-button--outlined:focus-visible { border-color: var(--md-sys-color-primary); } /* ---- Text (lowest emphasis) --------------------------------------------- */ .md-button--text { padding-inline: 12px; background-color: transparent; color: var(--md-sys-color-primary); --md-state-layer-color: var(--md-sys-color-primary); } .md-button--text:has(> .md-button__icon:first-child), .md-button--text:has(> svg:first-child), .md-button--text:has(> .md-icon:first-child) { padding-inline: 12px 16px; } .md-button--text:has(> .md-button__icon:last-child), .md-button--text:has(> svg:last-child), .md-button--text:has(> .md-icon:last-child) { padding-inline: 16px 12px; } /* ---- Colour role overrides ---------------------------------------------- */ .md-button--tertiary.md-button--filled { background-color: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); --md-state-layer-color: var(--md-sys-color-on-tertiary); } .md-button--tertiary.md-button--tonal { background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); --md-state-layer-color: var(--md-sys-color-on-tertiary-container); } .md-button--tertiary.md-button--outlined, .md-button--tertiary.md-button--text, .md-button--tertiary.md-button--elevated { color: var(--md-sys-color-tertiary); --md-state-layer-color: var(--md-sys-color-tertiary); } .md-button--error.md-button--filled { background-color: var(--md-sys-color-error); color: var(--md-sys-color-on-error); --md-state-layer-color: var(--md-sys-color-on-error); } .md-button--error.md-button--tonal { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); --md-state-layer-color: var(--md-sys-color-on-error-container); } .md-button--error.md-button--outlined, .md-button--error.md-button--text, .md-button--error.md-button--elevated { color: var(--md-sys-color-error); --md-state-layer-color: var(--md-sys-color-error); } /* ---- Size variants ------------------------------------------------------ */ /* Large: hero CTAs. 56dp tall with title-medium type and 24dp icons. */ .md-button--large { block-size: 56px; padding-inline: 32px; gap: 12px; font: var(--md-type-title-medium); letter-spacing: var(--md-sys-typescale-title-medium-tracking); } .md-button--large .md-button__icon, .md-button--large > svg, .md-button--large > img { font-size: 24px; inline-size: 24px; block-size: 24px; } .md-button--large:has(> .md-button__icon:first-child), .md-button--large:has(> svg:first-child), .md-button--large:has(> .md-icon:first-child) { padding-inline-start: 24px; } .md-button--large:has(> .md-button__icon:last-child), .md-button--large:has(> svg:last-child), .md-button--large:has(> .md-icon:last-child) { padding-inline-end: 24px; } /* Small: dense toolbars. */ .md-button--small { block-size: 32px; padding-inline: 16px; font: var(--md-type-label-medium); letter-spacing: var(--md-sys-typescale-label-medium-tracking); } .md-button--small .md-button__icon { font-size: 16px; inline-size: 16px; block-size: 16px; } /* Full-bleed */ .md-button--block { display: flex; inline-size: 100%; } /* ---- Disabled ----------------------------------------------------------- */ .md-button:disabled, .md-button[aria-disabled="true"], .md-button.is-disabled { cursor: default; pointer-events: none; box-shadow: var(--md-comp-elevation-0); --md-state-opacity: 0; color: var(--md-disabled-content); } .md-button--filled:disabled, .md-button--tonal:disabled, .md-button--elevated:disabled, .md-button--filled[aria-disabled="true"], .md-button--tonal[aria-disabled="true"], .md-button--elevated[aria-disabled="true"], .md-button--filled.is-disabled, .md-button--tonal.is-disabled, .md-button--elevated.is-disabled { background-color: var(--md-disabled-container); } .md-button--outlined:disabled, .md-button--outlined[aria-disabled="true"], .md-button--outlined.is-disabled { background-color: transparent; border-color: var(--md-disabled-container); } .md-button--text:disabled, .md-button--text[aria-disabled="true"], .md-button--text.is-disabled { background-color: transparent; } /* ========================================================================== 03 — ICON BUTTON 40×40 visual box, 24dp glyph, 48dp touch target, circular state layer. ========================================================================== */ .md-icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; padding: 0; flex: 0 0 auto; border: none; border-radius: var(--md-sys-shape-corner-full); background-color: transparent; color: var(--md-sys-color-on-surface-variant); --md-state-layer-color: var(--md-sys-color-on-surface-variant); cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; vertical-align: middle; overflow: visible; } .md-icon-button > * { position: relative; z-index: 1; } .md-icon-button > svg, .md-icon-button > img, .md-icon-button .md-icon { inline-size: 24px; block-size: 24px; font-size: 24px; } /* ---- Filled ------------------------------------------------------------- */ .md-icon-button--filled { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); --md-state-layer-color: var(--md-sys-color-on-primary); } /* ---- Tonal -------------------------------------------------------------- */ .md-icon-button--tonal { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); --md-state-layer-color: var(--md-sys-color-on-secondary-container); } /* ---- Outlined ----------------------------------------------------------- */ .md-icon-button--outlined { border: 1px solid var(--md-sys-color-outline); color: var(--md-sys-color-on-surface-variant); --md-state-layer-color: var(--md-sys-color-on-surface-variant); } /* ---- Toggle ------------------------------------------------------------- */ /* Unselected toggle reads as the standard icon button… */ .md-icon-button--toggle { color: var(--md-sys-color-on-surface-variant); --md-state-layer-color: var(--md-sys-color-on-surface-variant); } /* …selected switches to primary and fills the Material Symbol. */ .md-icon-button--toggle[aria-pressed="true"], .md-icon-button--toggle.is-selected, .md-icon-button--toggle[aria-checked="true"] { color: var(--md-sys-color-primary); --md-state-layer-color: var(--md-sys-color-primary); } .md-icon-button--toggle[aria-pressed="true"] .md-icon, .md-icon-button--toggle.is-selected .md-icon, .md-icon-button--toggle[aria-checked="true"] .md-icon { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; } /* Selected + filled toggle. */ .md-icon-button--toggle.md-icon-button--filled { background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary); --md-state-layer-color: var(--md-sys-color-primary); } .md-icon-button--toggle.md-icon-button--filled[aria-pressed="true"], .md-icon-button--toggle.md-icon-button--filled.is-selected, .md-icon-button--toggle.md-icon-button--filled[aria-checked="true"] { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); --md-state-layer-color: var(--md-sys-color-on-primary); } /* Selected + tonal toggle. */ .md-icon-button--toggle.md-icon-button--tonal { background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); --md-state-layer-color: var(--md-sys-color-on-surface-variant); } .md-icon-button--toggle.md-icon-button--tonal[aria-pressed="true"], .md-icon-button--toggle.md-icon-button--tonal.is-selected, .md-icon-button--toggle.md-icon-button--tonal[aria-checked="true"] { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); --md-state-layer-color: var(--md-sys-color-on-secondary-container); } /* ---- Size variants ------------------------------------------------------ */ .md-icon-button--small { inline-size: 32px; block-size: 32px; } .md-icon-button--small > svg, .md-icon-button--small .md-icon { inline-size: 20px; block-size: 20px; font-size: 20px; } .md-icon-button--large { inline-size: 56px; block-size: 56px; } .md-icon-button--large > svg, .md-icon-button--large .md-icon { inline-size: 32px; block-size: 32px; font-size: 32px; } /* ---- Disabled ----------------------------------------------------------- */ .md-icon-button:disabled, .md-icon-button[aria-disabled="true"], .md-icon-button.is-disabled { cursor: default; pointer-events: none; color: var(--md-disabled-content); --md-state-opacity: 0; } .md-icon-button--filled:disabled, .md-icon-button--tonal:disabled, .md-icon-button--filled[aria-disabled="true"], .md-icon-button--tonal[aria-disabled="true"], .md-icon-button--filled.is-disabled, .md-icon-button--tonal.is-disabled { background-color: var(--md-disabled-container); } .md-icon-button--outlined:disabled, .md-icon-button--outlined[aria-disabled="true"], .md-icon-button--outlined.is-disabled { border-color: var(--md-disabled-container); } /* ========================================================================== 04 — FAB / EXTENDED FAB 56dp, corner-large, elevation 3 resting → 4 hovered. ========================================================================== */ .md-fab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; inline-size: 56px; block-size: 56px; padding: 0; flex: 0 0 auto; border: none; border-radius: var(--md-sys-shape-corner-large); background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); --md-state-layer-color: var(--md-sys-color-on-primary-container); box-shadow: var(--md-comp-elevation-3); cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; text-decoration: none; vertical-align: middle; } .md-fab > * { position: relative; z-index: 1; } .md-fab__icon, .md-fab > svg, .md-fab .md-icon { inline-size: 24px; block-size: 24px; font-size: 24px; } .md-fab:hover { box-shadow: var(--md-comp-elevation-4); } .md-fab:active { box-shadow: var(--md-comp-elevation-3); } .md-fab:focus-visible { box-shadow: var(--md-comp-elevation-3); } /* ---- Colour variants ---------------------------------------------------- */ .md-fab--surface { background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-primary); --md-state-layer-color: var(--md-sys-color-primary); } .md-fab--secondary { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); --md-state-layer-color: var(--md-sys-color-on-secondary-container); } .md-fab--tertiary { background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); --md-state-layer-color: var(--md-sys-color-on-tertiary-container); } /* ---- Size variants ------------------------------------------------------ */ .md-fab--small { inline-size: 40px; block-size: 40px; border-radius: var(--md-sys-shape-corner-medium); } .md-fab--large { inline-size: 96px; block-size: 96px; border-radius: var(--md-sys-shape-corner-extra-large); } .md-fab--large .md-fab__icon, .md-fab--large > svg, .md-fab--large .md-icon { inline-size: 36px; block-size: 36px; font-size: 36px; } /* ---- Extended ----------------------------------------------------------- */ .md-fab--extended { inline-size: auto; min-inline-size: 80px; block-size: 56px; padding-inline: 20px; border-radius: var(--md-sys-shape-corner-large); font: var(--md-type-label-large); letter-spacing: var(--md-sys-typescale-label-large-tracking); white-space: nowrap; } .md-fab--extended:has(> .md-fab__icon:first-child), .md-fab--extended:has(> svg:first-child), .md-fab--extended:has(> .md-icon:first-child) { padding-inline-start: 16px; } .md-fab--extended .md-fab__label { display: inline-block; } /* Lowered FAB (M3 "lowered" style, elevation 1 → 2). */ .md-fab--lowered { box-shadow: var(--md-comp-elevation-1); } .md-fab--lowered:hover { box-shadow: var(--md-comp-elevation-2); } .md-fab--lowered:active { box-shadow: var(--md-comp-elevation-1); } /* Docked / floating placement helper. */ .md-fab--fixed { position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 20; } .md-fab:disabled, .md-fab[aria-disabled="true"], .md-fab.is-disabled { cursor: default; pointer-events: none; box-shadow: var(--md-comp-elevation-0); background-color: var(--md-disabled-container); color: var(--md-disabled-content); --md-state-opacity: 0; } /* ========================================================================== 05 — CARDS Corner-medium (12dp). Interactive cards get a state layer and lift on hover with emphasized easing. ========================================================================== */ .md-card { position: relative; display: block; border-radius: var(--md-sys-shape-corner-medium); background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); border: none; box-shadow: var(--md-comp-elevation-0); overflow: hidden; text-decoration: none; transition: box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized), translate var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized), background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), --md-state-opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-card--elevated { background-color: var(--md-sys-color-surface-container-low); box-shadow: var(--md-comp-elevation-1); } .md-card--filled { background-color: var(--md-sys-color-surface-container-highest); box-shadow: var(--md-comp-elevation-0); } .md-card--outlined { background-color: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); box-shadow: var(--md-comp-elevation-0); } /* ---- Interactive cards -------------------------------------------------- */ a.md-card, button.md-card, .md-card--interactive { cursor: pointer; -webkit-appearance: none; appearance: none; text-align: start; inline-size: 100%; -webkit-tap-highlight-color: transparent; --md-state-layer-color: var(--md-sys-color-on-surface); /* Restated here (rather than inherited from the shared machinery block) so the hover lift is part of the transition list. */ transition: box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized), translate var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized), background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), --md-state-opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } a.md-card:hover, button.md-card:hover, .md-card--interactive:hover { translate: 0 -2px; } a.md-card:active, button.md-card:active, .md-card--interactive:active { translate: 0 0; } a.md-card.md-card--elevated:hover, button.md-card.md-card--elevated:hover, .md-card--interactive.md-card--elevated:hover { box-shadow: var(--md-comp-elevation-2); } a.md-card.md-card--elevated:active, button.md-card.md-card--elevated:active, .md-card--interactive.md-card--elevated:active { box-shadow: var(--md-comp-elevation-1); } a.md-card.md-card--filled:hover, button.md-card.md-card--filled:hover, .md-card--interactive.md-card--filled:hover { box-shadow: var(--md-comp-elevation-1); } a.md-card.md-card--filled:active, button.md-card.md-card--filled:active, .md-card--interactive.md-card--filled:active { box-shadow: var(--md-comp-elevation-0); } a.md-card.md-card--outlined:hover, button.md-card.md-card--outlined:hover, .md-card--interactive.md-card--outlined:hover { box-shadow: var(--md-comp-elevation-1); } a.md-card.md-card--outlined:active, button.md-card.md-card--outlined:active, .md-card--interactive.md-card--outlined:active { box-shadow: var(--md-comp-elevation-0); border-color: var(--md-sys-color-outline); } /* Focus must be visible even though the card clips its contents. */ .md-card:focus-visible { outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color); outline-offset: var(--md-focus-ring-offset); } /* ---- Card slots --------------------------------------------------------- */ .md-card__media { display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; background-color: var(--md-sys-color-surface-variant); } .md-card__body { padding: 16px; } .md-card__headline { margin: 0 0 4px; font: var(--md-type-title-medium); letter-spacing: var(--md-sys-typescale-title-medium-tracking); color: var(--md-sys-color-on-surface); } .md-card__subhead { margin: 0 0 8px; font: var(--md-type-body-medium); letter-spacing: var(--md-sys-typescale-body-medium-tracking); color: var(--md-sys-color-on-surface-variant); } .md-card__supporting-text { margin: 0; font: var(--md-type-body-medium); letter-spacing: var(--md-sys-typescale-body-medium-tracking); color: var(--md-sys-color-on-surface-variant); } .md-card__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 16px 16px; } .md-card.is-disabled, .md-card[aria-disabled="true"] { pointer-events: none; opacity: 0.38; } /* ========================================================================== 06 — CHIPS 32dp tall, corner-small (8dp), outlined by default, 18dp icons. ========================================================================== */ .md-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; block-size: 32px; padding-inline: 16px; max-inline-size: 100%; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); background-color: transparent; color: var(--md-sys-color-on-surface-variant); --md-state-layer-color: var(--md-sys-color-on-surface-variant); font: var(--md-type-label-large); letter-spacing: var(--md-sys-typescale-label-large-tracking); white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; vertical-align: middle; box-shadow: var(--md-comp-elevation-0); } .md-chip > * { position: relative; z-index: 1; } .md-chip__label { overflow: hidden; text-overflow: ellipsis; } .md-chip__icon { font-size: 18px; inline-size: 18px; block-size: 18px; } .md-chip__icon:first-child { margin-inline-end: 8px; } .md-chip__icon:last-child { margin-inline-start: 8px; } .md-chip:has(> .md-chip__icon:first-child), .md-chip:has(> svg:first-child) { padding-inline-start: 8px; } .md-chip:has(> .md-chip__icon:last-child), .md-chip:has(> svg:last-child) { padding-inline-end: 8px; } /* ---- Assist ------------------------------------------------------------- */ .md-chip--assist { color: var(--md-sys-color-on-surface); --md-state-layer-color: var(--md-sys-color-on-surface); } .md-chip--assist .md-chip__icon { color: var(--md-sys-color-primary); } .md-chip--assist.md-chip--elevated { border-color: transparent; background-color: var(--md-sys-color-surface-container-low); box-shadow: var(--md-comp-elevation-1); } /* ---- Suggestion --------------------------------------------------------- */ .md-chip--suggestion { color: var(--md-sys-color-on-surface-variant); --md-state-layer-color: var(--md-sys-color-on-surface-variant); } .md-chip--suggestion.md-chip--elevated { border-color: transparent; background-color: var(--md-sys-color-surface-container-low); box-shadow: var(--md-comp-elevation-1); } /* ---- Filter ------------------------------------------------------------- The leading checkmark is drawn with `::after` and given `order: -1`, so it renders first in the flex row while staying markup-free. It animates from 0 → 18dp with emphasized easing. */ .md-chip--filter::after { content: ""; order: -1; display: block; inline-size: 0; block-size: 18px; margin-inline-end: 0; background-color: currentColor; -webkit-mask-image: var(--md-icon-check); mask-image: var(--md-icon-check); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; transition: inline-size var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized), margin-inline-end var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized); } .md-chip--filter[aria-pressed="true"], .md-chip--filter[aria-selected="true"], .md-chip--filter[aria-checked="true"], .md-chip--filter.is-selected { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); --md-state-layer-color: var(--md-sys-color-on-secondary-container); border-color: transparent; padding-inline-start: 8px; } .md-chip--filter[aria-pressed="true"]::after, .md-chip--filter[aria-selected="true"]::after, .md-chip--filter[aria-checked="true"]::after, .md-chip--filter.is-selected::after { inline-size: 18px; margin-inline-end: 8px; } /* Filter chip with its own leading icon: hide the generated check. */ .md-chip--filter:has(> .md-chip__icon:first-child)::after { content: none; } /* Elevated filter chip. */ .md-chip--filter.md-chip--elevated { border-color: transparent; background-color: var(--md-sys-color-surface-container-low); box-shadow: var(--md-comp-elevation-1); } /* ---- Input -------------------------------------------------------------- Input chips carry an avatar/icon at the start and a remove affordance at the end. 8dp padding on both ends. */ .md-chip--input { padding-inline: 8px 8px; color: var(--md-sys-color-on-surface-variant); --md-state-layer-color: var(--md-sys-color-on-surface-variant); } .md-chip--input:not(:has(> .md-chip__icon:first-child)) { padding-inline-start: 12px; } .md-chip__remove { display: inline-flex; align-items: center; justify-content: center; inline-size: 18px; block-size: 18px; margin-inline-start: 8px; padding: 0; border: none; border-radius: var(--md-sys-shape-corner-full); background-color: currentColor; color: inherit; cursor: pointer; -webkit-mask-image: var(--md-icon-close); mask-image: var(--md-icon-close); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; } .md-chip__remove:focus-visible { outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color); outline-offset: var(--md-focus-ring-offset); } /* Chip avatar (24dp circle at the leading edge). */ .md-chip__avatar { inline-size: 24px; block-size: 24px; border-radius: var(--md-sys-shape-corner-full); object-fit: cover; margin-inline-end: 8px; margin-inline-start: -4px; } /* ---- Chip set ----------------------------------------------------------- */ .md-chip-set { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; } .md-chip-set--scrolling { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 4px; scroll-snap-type: x proximity; } .md-chip-set--scrolling::-webkit-scrollbar { display: none; } .md-chip-set--scrolling > * { scroll-snap-align: start; } /* ---- Disabled ----------------------------------------------------------- */ .md-chip:disabled, .md-chip[aria-disabled="true"], .md-chip.is-disabled { cursor: default; pointer-events: none; color: var(--md-disabled-content); border-color: var(--md-disabled-container); background-color: transparent; box-shadow: var(--md-comp-elevation-0); --md-state-opacity: 0; } .md-chip--filter.is-selected:disabled, .md-chip--filter.is-selected[aria-disabled="true"] { background-color: var(--md-disabled-container); border-color: transparent; } /* ========================================================================== 07 — TOP APP BAR 64dp small bar; tonal shift to surface-container once the page scrolls. ========================================================================== */ .md-top-app-bar { position: sticky; inset-block-start: 0; z-index: 10; display: flex; align-items: center; gap: 4px; block-size: 64px; padding-inline: 4px; inline-size: 100%; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); box-shadow: var(--md-comp-elevation-0); transition: background-color var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard); } /* Scrolled state: tonal elevation, no shadow (M3 "on-scroll" container). */ .md-top-app-bar.is-scrolled { background-color: var(--md-sys-color-surface-container); box-shadow: var(--md-comp-elevation-0); } .md-top-app-bar.is-scrolled.md-top-app-bar--raised { box-shadow: var(--md-comp-elevation-2); } .md-top-app-bar__leading { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 48px; block-size: 48px; border: none; border-radius: var(--md-sys-shape-corner-full); background: transparent; color: var(--md-sys-color-on-surface); cursor: pointer; -webkit-appearance: none; appearance: none; } .md-top-app-bar__headline { flex: 1 1 auto; min-inline-size: 0; padding-inline: 12px; margin: 0; font: var(--md-type-title-large); letter-spacing: var(--md-sys-typescale-title-large-tracking); color: var(--md-sys-color-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .md-top-app-bar__trailing { display: inline-flex; align-items: center; gap: 0; flex: 0 0 auto; padding-inline-end: 4px; color: var(--md-sys-color-on-surface-variant); } /* ---- Variants ----------------------------------------------------------- */ .md-top-app-bar--center-aligned .md-top-app-bar__headline { text-align: center; padding-inline: 0; } .md-top-app-bar--medium, .md-top-app-bar--large { block-size: auto; flex-wrap: wrap; align-items: flex-start; padding-block: 0 24px; row-gap: 0; } .md-top-app-bar--medium { min-block-size: 112px; } .md-top-app-bar--large { min-block-size: 152px; } .md-top-app-bar--medium > .md-top-app-bar__leading, .md-top-app-bar--large > .md-top-app-bar__leading, .md-top-app-bar--medium > .md-top-app-bar__trailing, .md-top-app-bar--large > .md-top-app-bar__trailing { margin-block-start: 8px; } .md-top-app-bar--medium > .md-top-app-bar__headline, .md-top-app-bar--large > .md-top-app-bar__headline { flex: 1 0 100%; order: 3; padding-inline: 16px; white-space: normal; } .md-top-app-bar--medium > .md-top-app-bar__headline { font: var(--md-type-headline-small); letter-spacing: var(--md-sys-typescale-headline-small-tracking); } .md-top-app-bar--large > .md-top-app-bar__headline { font: var(--md-type-headline-medium); letter-spacing: var(--md-sys-typescale-headline-medium-tracking); } /* Spacer for the fixed bar. */ .md-top-app-bar-spacer { block-size: 64px; } /* ========================================================================== 08 — NAVIGATION: RAIL, DRAWER, BAR, ITEM The M3 active indicator is a 56×32 corner-full secondary-container pill sitting behind the icon. ========================================================================== */ /* ---- Nav item (rail / bar flavour: icon over label) --------------------- */ .md-nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; inline-size: 100%; min-block-size: 56px; padding: 0; border: none; background-color: transparent; color: var(--md-sys-color-on-surface-variant); --md-state-layer-color: var(--md-sys-color-on-surface); text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; /* The pill carries the state layer, not the whole item. */ background-image: none; } /* The pill. */ .md-nav-item__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 56px; block-size: 32px; border-radius: var(--md-sys-shape-corner-full); background-color: transparent; color: inherit; /* State layer lives on the pill. */ background-image: linear-gradient( color-mix(in srgb, var(--md-state-layer-color) calc(var(--md-state-opacity) * 100%), transparent) 0 0); transition: background-color var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized), --md-state-opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-nav-item__glyph, .md-nav-item__icon > svg, .md-nav-item__icon .md-icon { inline-size: 24px; block-size: 24px; font-size: 24px; } .md-nav-item__label { font: var(--md-type-label-medium); letter-spacing: var(--md-sys-typescale-label-medium-tracking); color: inherit; text-align: center; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Active */ .md-nav-item[aria-current="page"], .md-nav-item[aria-selected="true"], .md-nav-item.is-active { color: var(--md-sys-color-on-surface); } .md-nav-item[aria-current="page"] .md-nav-item__icon, .md-nav-item[aria-selected="true"] .md-nav-item__icon, .md-nav-item.is-active .md-nav-item__icon { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .md-nav-item[aria-current="page"] .md-nav-item__glyph, .md-nav-item[aria-selected="true"] .md-nav-item__glyph, .md-nav-item.is-active .md-nav-item__glyph { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; } .md-nav-item[aria-current="page"] .md-nav-item__label, .md-nav-item[aria-selected="true"] .md-nav-item__label, .md-nav-item.is-active .md-nav-item__label { font: var(--md-type-label-medium); font-weight: 600; letter-spacing: var(--md-sys-typescale-label-medium-tracking); } /* `--md-state-opacity` is registered as non-inheriting, so the pill needs the interaction states forwarded to it explicitly. */ .md-nav-item:hover .md-nav-item__icon { --md-state-opacity: var(--md-sys-state-hover-opacity); } .md-nav-item:focus-visible .md-nav-item__icon { --md-state-opacity: var(--md-sys-state-focus-opacity); } .md-nav-item:active .md-nav-item__icon { --md-state-opacity: var(--md-sys-state-pressed-opacity); } .md-nav-item:focus-visible { outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color); outline-offset: calc(var(--md-focus-ring-offset) * -1); border-radius: var(--md-sys-shape-corner-medium); } .md-nav-item.is-disabled, .md-nav-item[aria-disabled="true"] { pointer-events: none; color: var(--md-disabled-content); } /* ---- Navigation rail (tablet and up) ------------------------------------ */ .md-nav-rail { display: none; flex-direction: column; align-items: center; gap: 12px; inline-size: 80px; min-block-size: 100%; padding-block: 44px 16px; padding-inline: 0; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface-variant); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .md-nav-rail--container { background-color: var(--md-sys-color-surface-container); } .md-nav-rail__header { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-block-end: 4px; } .md-nav-rail__menu { margin-block-end: 12px; } .md-nav-rail__fab { margin-block-end: 24px; } .md-nav-rail__items { display: flex; flex-direction: column; align-items: center; gap: 12px; inline-size: 100%; list-style: none; margin: 0; padding: 0; } .md-nav-rail__items > li { inline-size: 100%; } .md-nav-rail__spacer { flex: 1 1 auto; } /* Rail is a tablet+ affordance. */ @media (min-width: 600px) { .md-nav-rail { display: flex; } } /* Sticky full-height rail. */ .md-nav-rail--sticky { position: sticky; inset-block-start: 0; block-size: 100dvh; } /* ---- Navigation drawer (modal, 360dp) ----------------------------------- */ .md-nav-drawer { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; display: flex; flex-direction: column; gap: 0; inline-size: 360px; max-inline-size: calc(100vw - 56px); padding-block: 12px; padding-inline: 12px; background-color: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface-variant); /* Corner-extra-large on the trailing edge only. */ border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--md-sys-shape-corner-extra-large); border-end-end-radius: var(--md-sys-shape-corner-extra-large); box-shadow: var(--md-comp-elevation-1); overflow-y: auto; overscroll-behavior: contain; translate: -100% 0; visibility: hidden; transition: translate var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-accelerate), visibility var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard); } .md-nav-drawer.is-open, .md-nav-drawer[aria-hidden="false"], .md-nav-drawer[open] { translate: 0 0; visibility: visible; transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate); } /* Mirrors correctly in RTL because translate is physical: flip it. */ [dir="rtl"] .md-nav-drawer { translate: 100% 0; } [dir="rtl"] .md-nav-drawer.is-open, [dir="rtl"] .md-nav-drawer[aria-hidden="false"] { translate: 0 0; } /* Standard (non-modal) drawer docked to the layout. */ .md-nav-drawer--standard { position: static; translate: none; visibility: visible; box-shadow: var(--md-comp-elevation-0); background-color: var(--md-sys-color-surface); max-inline-size: 360px; } /* Drawer scrim. */ .md-nav-scrim { position: fixed; inset: 0; z-index: 39; background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); opacity: 0; visibility: hidden; transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard), visibility var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard); } .md-nav-scrim.is-open, .md-nav-scrim[aria-hidden="false"] { opacity: 1; visibility: visible; } .md-nav-drawer__headline { padding: 16px 16px 16px; margin: 0; font: var(--md-type-title-small); letter-spacing: var(--md-sys-typescale-title-small-tracking); color: var(--md-sys-color-on-surface-variant); } .md-nav-drawer__section { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; } /* Drawer flavour of the nav item: the whole row is the 56dp pill. */ .md-nav-drawer .md-nav-item, .md-nav-item--drawer { flex-direction: row; justify-content: flex-start; gap: 12px; block-size: 56px; min-block-size: 56px; padding-inline: 16px 24px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); /* Row itself carries the state layer here. */ background-image: linear-gradient( color-mix(in srgb, var(--md-state-layer-color) calc(var(--md-state-opacity) * 100%), transparent) 0 0); transition: background-color var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized), --md-state-opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-nav-drawer .md-nav-item__icon, .md-nav-item--drawer .md-nav-item__icon { inline-size: 24px; block-size: 24px; background-color: transparent; background-image: none; border-radius: 0; } .md-nav-drawer .md-nav-item__label, .md-nav-item--drawer .md-nav-item__label { flex: 1 1 auto; text-align: start; font: var(--md-type-label-large); letter-spacing: var(--md-sys-typescale-label-large-tracking); } .md-nav-drawer .md-nav-item__trailing, .md-nav-item--drawer .md-nav-item__trailing { font: var(--md-type-label-large); letter-spacing: var(--md-sys-typescale-label-large-tracking); color: var(--md-sys-color-on-surface-variant); } .md-nav-drawer .md-nav-item[aria-current="page"], .md-nav-drawer .md-nav-item.is-active, .md-nav-item--drawer[aria-current="page"], .md-nav-item--drawer.is-active { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); --md-state-layer-color: var(--md-sys-color-on-secondary-container); } .md-nav-drawer .md-nav-item[aria-current="page"] .md-nav-item__icon, .md-nav-drawer .md-nav-item.is-active .md-nav-item__icon, .md-nav-item--drawer[aria-current="page"] .md-nav-item__icon, .md-nav-item--drawer.is-active .md-nav-item__icon { background-color: transparent; color: inherit; } .md-nav-drawer .md-nav-item:focus-visible, .md-nav-item--drawer:focus-visible { outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color); outline-offset: var(--md-focus-ring-offset); border-radius: var(--md-sys-shape-corner-full); } /* ---- Bottom navigation bar (phones) ------------------------------------- */ .md-nav-bar { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 10; display: flex; align-items: center; justify-content: space-around; block-size: 80px; padding-block: 12px 16px; padding-inline: 8px; background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); box-shadow: var(--md-comp-elevation-2); } .md-nav-bar > * { flex: 1 1 0; min-inline-size: 0; } @media (min-width: 600px) { .md-nav-bar { display: none; } } /* ========================================================================== 09 — TABS (primary) 48dp tall, 3dp corner-full active indicator, emphasized easing. ========================================================================== */ .md-tabs { position: relative; display: flex; align-items: stretch; inline-size: 100%; background-color: var(--md-sys-color-surface); /* 1dp divider under the whole bar. */ box-shadow: inset 0 -1px 0 0 var(--md-sys-color-surface-variant); overflow-x: auto; scrollbar-width: none; } .md-tabs::-webkit-scrollbar { display: none; } .md-tabs--scrollable > .md-tab { flex: 0 0 auto; min-inline-size: 90px; padding-inline: 16px; } .md-tabs--fixed > .md-tab { flex: 1 1 0; } .md-tab { position: relative; display: inline-flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; block-size: 48px; min-inline-size: 90px; padding-inline: 16px; padding-block: 0; border: none; background-color: transparent; color: var(--md-sys-color-on-surface-variant); --md-state-layer-color: var(--md-sys-color-on-surface); font: var(--md-type-title-small); letter-spacing: var(--md-sys-typescale-title-small-tracking); white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; /* Room for the 3dp indicator. */ --md-tab-indicator-inset: 12px; } .md-tab > * { position: relative; z-index: 1; } .md-tab__icon { inline-size: 24px; block-size: 24px; font-size: 24px; } /* Tabs with both an icon and a label are 64dp tall (M3 primary with icon). */ .md-tabs--with-icons > .md-tab { block-size: 64px; } /* Active indicator. */ .md-tab::after { content: ""; position: absolute; inset-block-end: 0; inset-inline: var(--md-tab-indicator-inset); block-size: 3px; border-start-start-radius: var(--md-sys-shape-corner-full); border-start-end-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-primary); scale: 0 1; opacity: 0; transition: scale var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized), opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); z-index: 1; pointer-events: none; } .md-tab[aria-selected="true"], .md-tab.is-active { color: var(--md-sys-color-primary); --md-state-layer-color: var(--md-sys-color-primary); } .md-tab[aria-selected="true"]::after, .md-tab.is-active::after { scale: 1 1; opacity: 1; } .md-tab[aria-selected="true"] .md-tab__icon, .md-tab.is-active .md-tab__icon { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; } /* Secondary tabs: full-width indicator, on-surface active label. */ .md-tabs--secondary > .md-tab { --md-tab-indicator-inset: 0px; } .md-tabs--secondary > .md-tab[aria-selected="true"], .md-tabs--secondary > .md-tab.is-active { color: var(--md-sys-color-on-surface); } /* Optional sliding shared indicator. Set `--md-tabs-count` to the number of tabs and `--md-tabs-active` to the zero-based index of the active tab (a single inline style or CSS rule). */ .md-tabs--sliding > .md-tab::after { content: none; } .md-tabs__indicator { position: absolute; inset-block-end: 0; inset-inline-start: 0; block-size: 3px; inline-size: calc(100% / var(--md-tabs-count, 1)); border-start-start-radius: var(--md-sys-shape-corner-full); border-start-end-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-primary); translate: calc(var(--md-tabs-active, 0) * 100%) 0; transition: translate var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized); pointer-events: none; } .md-tab:disabled, .md-tab[aria-disabled="true"] { pointer-events: none; color: var(--md-disabled-content); } /* ========================================================================== 10 — SEGMENTED BUTTON Outlined, 40dp, corner-full on the outer ends only, adjoining 1dp borders collapsed. The selected segment fills with secondary-container and reveals an animated leading checkmark. Supports three markup patterns, all styled identically: A) Buttons with aria-pressed (multi-select) / aria-checked (single-select)