mirror of
https://github.com/logto-io/logto.git
synced 2025-02-17 22:04:19 -05:00
refactor(console): fix language editor styles (#2110)
This commit is contained in:
parent
b9bb78521d
commit
c21cc3cab6
7 changed files with 12 additions and 10 deletions
|
@ -27,6 +27,8 @@
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
max-height: 288px;
|
max-height: 288px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
box-shadow: var(--shadow-2);
|
||||||
|
|
||||||
|
|
||||||
.dropDownItem {
|
.dropDownItem {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -34,18 +36,17 @@
|
||||||
padding: _.unit(2);
|
padding: _.unit(2);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font: var(--font-body-medium);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--color-hover);
|
background: var(--color-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.languageName {
|
.languageName {
|
||||||
font: var(--font-label-large);
|
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.languageTag {
|
.languageTag {
|
||||||
font: var(--font-body-medium);
|
|
||||||
color: var(--color-caption);
|
color: var(--color-caption);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -61,7 +61,7 @@ const AddLanguageSelector = ({ options, onSelect }: Props) => {
|
||||||
className={classNames(style.addLanguageButton, isDropDownOpen && style.hidden)}
|
className={classNames(style.addLanguageButton, isDropDownOpen && style.hidden)}
|
||||||
icon={<Plus className={style.buttonIcon} />}
|
icon={<Plus className={style.buttonIcon} />}
|
||||||
title="sign_in_exp.others.manage_language.add_language"
|
title="sign_in_exp.others.manage_language.add_language"
|
||||||
type="outline"
|
type="default"
|
||||||
size="medium"
|
size="medium"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsDropDownOpen(true);
|
setIsDropDownOpen(true);
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
@use '@/scss/underscore' as _;
|
@use '@/scss/underscore' as _;
|
||||||
|
|
||||||
.sectionTitle {
|
.sectionTitle {
|
||||||
@include _.subhead-cap;
|
@include _.subhead-cap-small;
|
||||||
|
color: var(--color-neutral-variant-60);
|
||||||
background-color: var(--color-layer-light);
|
background-color: var(--color-layer-light);
|
||||||
|
padding: _.unit(1) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionDataKey {
|
.sectionDataKey {
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
border-top: 1px solid var(--color-border);
|
border-top: 1px solid var(--color-divider);
|
||||||
height: 481px;
|
height: 481px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
|
@ -91,7 +91,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
border-top: 1px solid var(--color-border);
|
border-top: 1px solid var(--color-divider);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
padding: _.unit(5);
|
padding: _.unit(5);
|
||||||
|
|
|
@ -5,14 +5,13 @@
|
||||||
margin-bottom: _.unit(1);
|
margin-bottom: _.unit(1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
font: var(--font-label-large);
|
||||||
|
|
||||||
.languageName {
|
.languageName {
|
||||||
font: var(--font-title-medium);
|
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.languageTag {
|
.languageTag {
|
||||||
font: var(--font-label-large);
|
|
||||||
color: var(--color-caption);
|
color: var(--color-caption);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
padding: _.unit(3) _.unit(2);
|
padding: _.unit(3) _.unit(2);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background-color: var(--color-layer-light);
|
background-color: var(--color-layer-light);
|
||||||
border-right: 1px solid var(--color-border);
|
border-right: 1px solid var(--color-divider);
|
||||||
|
|
||||||
.languageItemList {
|
.languageItemList {
|
||||||
margin-top: _.unit(3);
|
margin-top: _.unit(3);
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-divider);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue