Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-27 21:39:16 -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;
align-items: center;
border-radius: 100px;
height: 34px;
color: var(--color-text);
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 {
width: 16px;
@ -22,15 +25,27 @@
color: var(--color-text-link);
}
&.active,
&:hover {
&:active {
background: var(--color-overlay-primary-pressed);
}
&:not(:disabled):not(:active):hover {
background: var(--color-overlay-primary-hover);
}
&.active {
background: var(--color-inverse-primary);
color: var(--color-white);
border-color: var(--color-inverse-primary);
cursor: default;
svg {
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 {
border-radius: 100px;
border-color: var(--color-specific-focused-inside);
background: none;
height: 32px;
border-color: var(--color-surface-5);
background: var(--color-layer-1);
height: 34px;
padding: 0 _.unit(3);
transition: none;
svg {
color: var(--color-text-link);
}
&:hover {
background: var(--color-overlay-primary-hover);
}
&:active {
background: var(--color-overlay-primary-pressed);
}
&:not(:disabled):not(:active):hover {
background: var(--color-overlay-primary-hover);
}
&.active {
background: var(--color-specific-tag-upsell);
border-color: var(--color-specific-tag-upsell);
@ -43,7 +45,7 @@
color: var(--color-specific-button-icon);
}
&:hover {
&:not(:disabled):not(:active):hover {
background: var(--color-specific-tag-upsell);
}
}