Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-13 21:30:30 -05:00
Code Issues Activity

refactor(console): improve switch button styles (#5655)

Browse source
This commit is contained in:
Charles Zhao 2024-04-09 17:28:19 +08:00 • committed by GitHub
parent 557f95564a
commit 919fd8b00d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/index.module.scss
View file

@ -11,9 +11,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 100px; border-radius: 100px;
height: 34px;
color: var(--color-text); color: var(--color-text);
background: var(--color-layer-1); background: var(--color-layer-1);
border: 1px solid var(--color-specific-selected-disabled); border: 1px solid var(--color-surface-5);
padding: 0 _.unit(3);
transition: none;
svg { svg {
width: 16px; width: 16px;
@ -22,15 +25,27 @@
color: var(--color-text-link); color: var(--color-text-link);
} }
&.active, &:active {
&:hover { background: var(--color-overlay-primary-pressed);
}
&:not(:disabled):not(:active):hover {
background: var(--color-overlay-primary-hover);
}
&.active {
background: var(--color-inverse-primary); background: var(--color-inverse-primary);
color: var(--color-white); color: var(--color-white);
border-color: var(--color-inverse-primary); border-color: var(--color-inverse-primary);
cursor: default;
svg { svg {
color: var(--color-button-icon); color: var(--color-button-icon);
} }
&:not(:disabled):not(:active):hover {
background: var(--color-inverse-primary);
}
} }
} }
} }

18
packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss
View file

@ -16,23 +16,25 @@
.button { .button {
border-radius: 100px; border-radius: 100px;
border-color: var(--color-specific-focused-inside); border-color: var(--color-surface-5);
background: none; background: var(--color-layer-1);
height: 32px; height: 34px;
padding: 0 _.unit(3); padding: 0 _.unit(3);
transition: none;
svg { svg {
color: var(--color-text-link); color: var(--color-text-link);
} }
&:hover {
background: var(--color-overlay-primary-hover);
}
&:active { &:active {
background: var(--color-overlay-primary-pressed); background: var(--color-overlay-primary-pressed);
} }
&:not(:disabled):not(:active):hover {
background: var(--color-overlay-primary-hover);
}
&.active { &.active {
background: var(--color-specific-tag-upsell); background: var(--color-specific-tag-upsell);
border-color: var(--color-specific-tag-upsell); border-color: var(--color-specific-tag-upsell);
@ -43,7 +45,7 @@
color: var(--color-specific-button-icon); color: var(--color-specific-button-icon);
} }
&:hover { &:not(:disabled):not(:active):hover {
background: var(--color-specific-tag-upsell); background: var(--color-specific-tag-upsell);
} }
} }