Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-14 16:28:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Add new plain (text-only) button variant

Browse Source 
Port bc952ebde9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-09-03 14:34:29 +02:00
committed by Claire
parent 6fc9febb47
commit 7441f21b18
2 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/flavours/glitch/components/button/index.tsx
View File

@@ -9,6 +9,7 @@ interface BaseProps
extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> { extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
block?: boolean; block?: boolean;
secondary?: boolean; secondary?: boolean;
plain?: boolean;
compact?: boolean; compact?: boolean;
dangerous?: boolean; dangerous?: boolean;
loading?: boolean; loading?: boolean;
@@ -35,6 +36,7 @@ export const Button: React.FC<Props> = ({
disabled, disabled,
block, block,
secondary, secondary,
plain,
compact, compact,
dangerous, dangerous,
loading, loading,
@@ -62,6 +64,7 @@ export const Button: React.FC<Props> = ({
<button <button
className={classNames('button', className, { className={classNames('button', className, {
'button-secondary': secondary, 'button-secondary': secondary,
'button--plain': plain,
'button--compact': compact, 'button--compact': compact,
'button--block': block, 'button--block': block,
'button--dangerous': dangerous, 'button--dangerous': dangerous,

35
app/javascript/flavours/glitch/styles/components.scss
View File

@@ -201,6 +201,41 @@
} }
} }
&.button--plain {
color: $highlight-text-color;
background: transparent;
padding: 6px;
// The button has no outline, so we use negative margin to
// visually align its label with its surroundings while maintaining
// a generous click target
margin-inline: -6px;
border: 1px solid transparent;
&:active,
&:focus,
&:hover {
border-color: transparent;
color: lighten($highlight-text-color, 4%);
background-color: transparent;
text-decoration: none;
}
&:disabled,
&.disabled {
opacity: 0.7;
border-color: transparent;
color: $ui-button-disabled-color;
&:active,
&:focus,
&:hover {
border-color: transparent;
color: $ui-button-disabled-color;
}
}
}
&.button-tertiary { &.button-tertiary {
background: transparent; background: transparent;
padding: 6px 17px; padding: 6px 17px;