1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Button outlined style

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-10-01 15:16:58 +03:00
parent 1d776ba29c
commit 3f6e68361e
2 changed files with 14 additions and 2 deletions

View File

@ -41,6 +41,17 @@
} }
} }
&.outlined {
color: inherit;
background: transparent;
&.active,
&:focus {
color: inherit;
box-shadow: 0 0 0 1px inset;
}
}
&.big { &.big {
font-size: 2.2 * $unit; font-size: 2.2 * $unit;
border-radius: 50px; border-radius: 50px;

View File

@ -9,6 +9,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<any>, TooltipDecorator
primary?: boolean; primary?: boolean;
accent?: boolean; accent?: boolean;
plain?: boolean; plain?: boolean;
outlined?: boolean;
hidden?: boolean; hidden?: boolean;
active?: boolean; active?: boolean;
big?: boolean; big?: boolean;
@ -23,12 +24,12 @@ export class Button extends React.PureComponent<ButtonProps, {}> {
private button: HTMLButtonElement; private button: HTMLButtonElement;
render() { render() {
const { className, waiting, label, primary, accent, plain, hidden, active, big, round, tooltip, children, ...props } = this.props; const { className, waiting, label, primary, accent, plain, hidden, active, big, round, outlined, tooltip, children, ...props } = this.props;
const btnProps = props as Partial<ButtonProps>; const btnProps = props as Partial<ButtonProps>;
if (hidden) return null; if (hidden) return null;
btnProps.className = cssNames('Button', className, { btnProps.className = cssNames('Button', className, {
waiting, primary, accent, plain, active, big, round, waiting, primary, accent, plain, active, big, round, outlined
}); });
const btnContent: ReactNode = ( const btnContent: ReactNode = (