Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-04-07 23:01:25 -05:00
Code Issues Activity

feat(console): add outline and plain button types

Browse source
This commit is contained in:
Charles Zhao 2022-03-14 17:23:32 +08:00
parent 56c8b6069a
commit d02112f6a4
No known key found for this signature in database
GPG key ID: 4858774754C92DF2
2 changed files with 66 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
packages/console/src/components/Button/index.module.scss
View file

@ -13,18 +13,30 @@
}
&.small {
height: 20px;
height: 30px;
padding: 0 _.unit(3);
&.plain {
height: 24px;
}
}
&.medium {
height: 36px;
padding: 0 _.unit(4);
padding: 0 _.unit(4);
&.plain {
height: 28px;
}
}
&.large {
height: 44px;
padding: 0 _.unit(6);
&.plain {
height: 28px; // same as medium
}
}
&.default {
@ -85,4 +97,55 @@
background: var(--color-error-30);
}
}
&.outline {
background: var(--color-on-primary);
border-color: var(--color-primary);
border-width: 1px;
border-style: solid;
color: var(--color-primary);
&:disabled {
border-color: var(--color-neutral-70);
color: var(--color-neutral-70);
}
&:focus {
outline: 3px solid var(--color-primary-80);
}
&:active {
border-color: var(--color-primary-30);
color: var(--color-primary-30);
}
&:not(:disabled):hover {
border-color: var(--color-primary-30);
color: var(--color-primary-30);
background: var(--color-surface-3);
}
}
&.plain {
background: none;
border-color: none;
color: var(--color-primary);
&:disabled {
color: var(--color-neutral-80);
}
&:focus {
outline: 2px solid var(--color-primary-80);
}
&:active {
color: var(--color-primary-30);
background: var(--color-primary-95);
}
&:not(:disabled):hover {
color: var(--color-primary-30);
}
}
}

2
packages/console/src/components/Button/index.tsx
View file

@ -8,7 +8,7 @@ import * as styles from './index.module.scss';
export type Props = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> & {
htmlType?: 'button' | 'submit' | 'reset';
title: I18nKey;
type?: 'primary' | 'danger' | 'default';
type?: 'primary' | 'danger' | 'outline' | 'plain' | 'default';
size?: 'small' | 'medium' | 'large';
};