Thomas des Francs
105 lines
2.8 KiB
SCSS
105 lines
2.8 KiB
SCSS
// State rules below only assign CSS custom properties; the actual
|
|
// declarations live on the flat .button class so twenty-front
|
|
// styled(FloatingButton) overrides keep beating them at (0,1,0) specificity,
|
|
// exactly like the legacy single Linaria class did.
|
|
|
|
.button {
|
|
align-items: center;
|
|
backdrop-filter: var(--floating-button-backdrop-filter, none);
|
|
background: var(--t-background-primary);
|
|
border: var(--floating-button-border, none);
|
|
border-radius: var(--floating-button-radius, var(--t-border-radius-md));
|
|
box-shadow: var(--floating-button-box-shadow, none);
|
|
color: var(--floating-button-color, var(--t-font-color-secondary));
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-family: var(--t-font-family);
|
|
font-weight: var(--t-font-weight-regular);
|
|
gap: var(--t-spacing-1);
|
|
padding: 0 var(--t-spacing-2);
|
|
text-decoration: none;
|
|
transition: background 0.1s ease;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background: var(
|
|
--floating-button-hover-bg,
|
|
var(--t-background-transparent-lighter)
|
|
);
|
|
}
|
|
|
|
&:active {
|
|
background: var(
|
|
--floating-button-active-bg,
|
|
var(--t-background-transparent-medium)
|
|
);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
@include focus-ring;
|
|
|
|
&[data-disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.small {
|
|
height: 24px;
|
|
}
|
|
|
|
.medium {
|
|
height: 32px;
|
|
}
|
|
|
|
// position only reshapes the radius; standalone keeps the .button default.
|
|
.button[data-position='left'] {
|
|
--floating-button-radius: var(--t-border-radius-md) 0px 0px
|
|
var(--t-border-radius-md);
|
|
}
|
|
|
|
.button[data-position='middle'] {
|
|
--floating-button-radius: 0px;
|
|
}
|
|
|
|
.button[data-position='right'] {
|
|
--floating-button-radius: 0px var(--t-border-radius-md)
|
|
var(--t-border-radius-md) 0px;
|
|
}
|
|
|
|
.button[data-apply-blur] {
|
|
--floating-button-backdrop-filter: blur(20px);
|
|
}
|
|
|
|
// box-shadow matrix from the legacy nested ternary: shadow, focus, and
|
|
// shadow+focus — the combined rule comes last so it wins the cascade.
|
|
.button[data-apply-shadow] {
|
|
--floating-button-box-shadow:
|
|
0px 2px 4px 0px var(--t-background-transparent-light),
|
|
0px 0px 4px 0px var(--t-background-transparent-medium);
|
|
}
|
|
|
|
// focus is gated by !disabled in the component, like the legacy call-site.
|
|
.button[data-focus] {
|
|
--floating-button-border: 1px solid var(--t-color-blue);
|
|
--floating-button-box-shadow: 0 0 0 3px var(--t-color-blue3);
|
|
--floating-button-color: var(--t-color-blue);
|
|
}
|
|
|
|
.button[data-apply-shadow][data-focus] {
|
|
--floating-button-box-shadow:
|
|
0px 2px 4px 0px var(--t-background-transparent-light),
|
|
0px 0px 4px 0px var(--t-background-transparent-medium),
|
|
0 0 0 3px var(--t-color-blue3);
|
|
}
|
|
|
|
// disabled comes last: it beats focus in the legacy color ternary.
|
|
.button[data-disabled] {
|
|
--floating-button-color: var(--t-font-color-extra-light);
|
|
--floating-button-hover-bg: transparent;
|
|
--floating-button-active-bg: transparent;
|
|
}
|