mirror of
https://github.com/logto-io/logto.git
synced 2024-12-30 20:33:54 -05:00
refactor(console): improve switch button styles (#5655)
This commit is contained in:
parent
557f95564a
commit
919fd8b00d
2 changed files with 28 additions and 11 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue