Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

fix(ui): add focus-visible border to countrySelector (#3469)

Browse source
This commit is contained in:
simeng-li 2023-03-17 21:23:27 +08:00 committed by GitHub
parent edc5ddb551
commit 36f26a7f17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/ui/src/components/InputFields/SmartInputField/CountryCodeSelector/CountryCodeDropdown/index.module.scss
View file

@ -59,7 +59,6 @@
&.selected { &.selected {
border-radius: _.unit(2); border-radius: _.unit(2);
background: var(--color-overlay-neutral-hover); background: var(--color-overlay-neutral-hover);
color: var(--color-type-link);
} }
} }
} }

26
packages/ui/src/components/InputFields/SmartInputField/CountryCodeSelector/index.module.scss
View file

@ -3,7 +3,9 @@
.countryCodeSelector { .countryCodeSelector {
font: var(--font-label-1); font: var(--font-label-1);
color: var(--color-type-primary); color: var(--color-type-primary);
border: none; border: _.border('transparent');
border-top-left-radius: var(--radius);
border-bottom-left-radius: var(--radius);
background: none; background: none;
position: relative; position: relative;
height: 100%; height: 100%;
@ -13,22 +15,8 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
> select { &:focus-visible {
flex-shrink: 0; border: _.border(var(--color-brand-default));
appearance: none;
border: none;
outline: none;
background: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 0;
option {
font: var(--font-label-1);
}
} }
> svg { > svg {
@ -44,10 +32,6 @@
.countryCodeSelector { .countryCodeSelector {
font: var(--font-body-2); font: var(--font-body-2);
> select option {
font: var(--font-body-2);
}
> svg { > svg {
margin-left: _.unit(2); margin-left: _.unit(2);
width: 20px; width: 20px;