Joshua
8da593c450
All checks were successful
Dev Build / build-test (pull_request) Successful in 1m57s
68 lines
2.1 KiB
SCSS
68 lines
2.1 KiB
SCSS
// ============================================================================
|
|
// Quick-Jump Button — M3 FilledTonalIconButton
|
|
// Per spec Section 7.3: Agent Card Quick-Jump action
|
|
// M3 spec: FilledTonalIconButton uses secondary container color
|
|
// with 8% state layer overlay for hover/focus.
|
|
// ============================================================================
|
|
|
|
.quick-jump-button {
|
|
// M3 FilledTonalIconButton: secondary-container background
|
|
// Angular Material mat-icon-button sets up the base shape (40x40, round).
|
|
// We override the color tokens to match FilledTonal style.
|
|
--mdc-icon-button-icon-color: var(--mat-sys-on-secondary-container);
|
|
background-color: var(--mat-sys-secondary-container);
|
|
border-radius: 50%;
|
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
// M3 State Layer: 8% overlay on hover
|
|
&:hover {
|
|
background-color: var(--mat-sys-secondary-container);
|
|
// State layer overlay using a pseudo-element for precise 8% opacity
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
background-color: var(--mat-sys-on-secondary-container);
|
|
opacity: 0.08;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
// M3 State Layer: 12% overlay on focus-visible (slightly stronger for accessibility)
|
|
&:focus-visible {
|
|
background-color: var(--mat-sys-secondary-container);
|
|
outline: 3px solid var(--status-active);
|
|
outline-offset: 2px;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
background-color: var(--mat-sys-on-secondary-container);
|
|
opacity: 0.12;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
// M3 State Layer: 12% overlay on active/pressed
|
|
&:active {
|
|
background-color: var(--mat-sys-secondary-container);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
background-color: var(--mat-sys-on-secondary-container);
|
|
opacity: 0.12;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
// Icon color stays on-secondary-container across all states
|
|
.mat-icon {
|
|
color: var(--mat-sys-on-secondary-container);
|
|
}
|
|
} |