Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00
Code Issues Activity

style(ui): input auto fill style (#1055)

Browse source 
input auto fill style
This commit is contained in:
simeng-li 2022-06-07 09:50:56 +08:00 • committed by GitHub
parent 88e2120e25
commit d203f2fa5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/ui/src/components/Input/index.module.scss
View file

@ -5,16 +5,20 @@
@include _.flex-row;
border: _.border();
border-radius: var(--radius);
background: var(--color-layer);
// fix in safari input field line-height issue
height: 46px;
height: 44px;
overflow: hidden;
transition-property: outline, border;
transition-timing-function: ease-in-out;
transition-duration: 0.2s;
padding: 0 _.unit(4);
.actionButton {
display: none;
color: var(--color-icon);
width: 24px;
height: 24px;
}
> *:not(:first-child) {
@ -36,10 +40,10 @@
input {
flex: 1;
background: none;
padding: _.unit(3) 0;
caret-color: var(--color-primary);
font: var(--font-body-bold);
color: var(--color-text);
align-self: stretch;
&::placeholder {
color: var(--color-caption);
@ -47,8 +51,7 @@
// Overwrite webkit auto-fill style
&:-webkit-autofill {
box-shadow: 0 0 0 30px var(--color-control-background) inset;
transition: background-color 5000s ease-in-out 0s;
box-shadow: 0 0 0 30px var(--color-layer) inset;
-webkit-text-fill-color: var(--color-text);
}
}
@ -59,29 +62,22 @@
}
:global(body.mobile) {
.wrapper {
padding: 0 _.unit(4);
background: var(--color-layer);
color: var(--color-text);
.actionButton {
width: 24px;
height: 24px;
}
}
}
:global(body.desktop) {
.wrapper {
padding: 0 _.unit(3);
background: transparent;
border: _.border(var(--color-border));
border-radius: 6px;
outline: 3px solid transparent;
background: var(--color-surface);
input {
font: var(--font-body);
// Overwrite webkit auto-fill style
&:-webkit-autofill {
box-shadow: 0 0 0 30px var(--color-surface) inset;
-webkit-text-fill-color: var(--color-text);
}
}
.actionButton {

6
packages/ui/src/scss/_desktop.scss
View file

@ -10,7 +10,7 @@ $font-family: -apple-system,
sans-serif;
@mixin colors-light-theme {
--color-base: linear-gradient(0deg, rgba(93, 52, 242, 14%), rgba(93, 52, 242, 14%)), linear-gradient(0deg, rgba(120, 118, 127, 2%), rgba(120, 118, 127, 2%)), #f7f8f8;
--color-base: #e5e1ec;
--color-surface: #fff;
--color-surface-variant: #e5e1ec;
--color-text: #191c1d; // Neutral-10
@ -39,7 +39,7 @@ $font-family: -apple-system,
}
@mixin colors-dark-theme {
--color-base: linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
--color-base: #2a2c32;
--color-surface: #191c1d;
--color-surface-variant: #47464e;
--color-text: #f7f8f8; // Neutral-10
@ -62,7 +62,7 @@ $font-family: -apple-system,
--color-inverse-on-surface: #2d3132;
--color-outline: #928f9a;
--color-layer: linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
--color-layer: #2a2c32;
--color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
--color-divider: #444748;
--color-error: #dd3730;

2
packages/ui/src/scss/_mobile.scss
View file

@ -38,7 +38,7 @@ $font-family: -apple-system,
--color-text-disabled: #5c5f60;
--color-border: #5c5f60;
--color-primary: var(--dark-primary-color);
--color-layer: linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
--color-layer: #2a2c32;
--color-error: #dd3730;
--color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
}