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:
parent
1d776ba29c
commit
3f6e68361e
@ -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;
|
||||||
|
|||||||
@ -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 = (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user