38 lines
1.2 KiB
SCSS
38 lines
1.2 KiB
SCSS
|
// ============================================================================
|
||
|
|
// Quick-Jump Button — M3 FilledTonalIconButton
|
||
|
|
// ============================================================================
|
||
|
|
// Per spec: 8% state layer overlay on hover/focus using
|
||
|
|
// --color-surface-light with opacity.
|
||
|
|
// ============================================================================
|
||
|
|
|
||
|
|
.quick-jump-button {
|
||
|
|
// M3 FilledTonalIconButton base: secondary container background
|
||
|
|
// with on-secondary-container icon color. We rely on the M3 theme
|
||
|
|
// token values provided by Angular Material, but override the
|
||
|
|
// ripple/state-layer to use the 8% overlay pattern.
|
||
|
|
|
||
|
|
// M3 state layer — 8% overlay on hover/focus
|
||
|
|
// Using the project's custom surface-light token with opacity
|
||
|
|
&::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
border-radius: inherit;
|
||
|
|
background-color: var(--cc-on-surface, #E2E8F0);
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover::after {
|
||
|
|
opacity: 0.08; // 8% state layer
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus-visible::after {
|
||
|
|
opacity: 0.08; // 8% state layer on focus
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active::after {
|
||
|
|
opacity: 0.12; // 12% pressed state per M3 spec
|
||
|
|
}
|
||
|
|
}
|