adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: input style

Browse source
This commit is contained in:
luoxiao 2024-05-09 23:28:08 +08:00
parent cad7d04691
commit ed425b90f0
3 changed files with 83 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
thaw/src/input/input.css
View file

@ -1,17 +1,77 @@
.thaw-input {
display: inline-flex;
width: 100%;
align-items: center;
flex-wrap: nowrap;
position: relative;
box-sizing: border-box;
padding: 0 10px;
background-color: var(--thaw-background-color);
font-size: 14px;
color: var(--thaw-font-color);
border: 1px solid var(--thaw-border-color);
border-radius: var(--thaw-border-radius);
min-height: 32px;
background-color: var(--colorNeutralBackground1);
font-family: var(--fontFamilyBase);
font-size: var(--fontSizeBase300);
font-weight: var(--fontWeightRegular);
line-height: var(--lineHeightBase300);
border: 1px solid var(--colorNeutralStroke1);
border-bottom-color: var(--colorNeutralStrokeAccessible);
border-radius: var(--borderRadiusMedium);
cursor: text;
transition: all 0.3s;
}
.thaw-input:hover {
border-color: var(--colorNeutralStroke1Hover);
border-bottom-color: var(--colorNeutralStrokeAccessibleHover);
}
.thaw-input:active .thaw-input:focus-within {
border-color: var(--colorNeutralStroke1Pressed);
border-bottom-color: var(--colorNeutralStrokeAccessiblePressed);
}
.thaw-input::after {
box-sizing: border-box;
content: "";
position: absolute;
left: -1px;
bottom: -1px;
right: -1px;
height: max(2px, var(--borderRadiusMedium));
border-bottom-left-radius: var(--borderRadiusMedium);
border-bottom-right-radius: var(--borderRadiusMedium);
border-bottom: 2px solid var(--colorCompoundBrandStroke);
clip-path: inset(calc(100% - 2px) 0px 0px);
transform: scaleX(0);
transition-property: transform;
transition-duration: var(--durationUltraFast);
transition-delay: var(--curveAccelerateMid);
}
.thaw-input:focus-within::after {
transform: scaleX(1);
transition-property: transform;
transition-duration: var(--durationNormal);
transition-delay: var(--curveDecelerateMid);
}
.thaw-input__input-el {
align-self: stretch;
box-sizing: border-box;
flex-grow: 1;
min-width: 0px;
border-style: none;
padding: 0 var(--spacingHorizontalM);
color: var(--colorNeutralForeground1);
background-color: transparent;
outline-style: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.thaw-input--focus,
.thaw-input:hover:not(.thaw-input--disabled, .thaw-input--invalid) {
border-color: var(--thaw-border-color-hover);
@ -36,17 +96,6 @@
box-shadow: 0 0 0 2px var(--thaw-box-shadow-color-invalid);
}
.thaw-input__input-el {
width: 100%;
height: 30px;
background-color: transparent !important;
color: var(--thaw-font-color);
line-height: 30px;
font-size: inherit;
border: none;
outline: none;
}
.thaw-input__input-el::placeholder {
color: var(--thaw-placeholder-color);
}

12
thaw/src/theme/color.rs
View file

@ -22,6 +22,10 @@ pub struct ColorTheme {
pub color_neutral_stroke_1: String,
pub color_neutral_stroke_1_hover: String,
pub color_neutral_stroke_1_pressed: String,
pub color_neutral_stroke_accessible: String,
pub color_compound_brand_stroke: String,
pub color_brand_background: String,
pub color_brand_background_hover: String,
pub color_brand_background_pressed: String,
@ -55,6 +59,10 @@ impl ColorTheme {
color_neutral_stroke_1: "#d1d1d1".into(),
color_neutral_stroke_1_hover: "#c7c7c7".into(),
color_neutral_stroke_1_pressed: "#b3b3b3".into(),
color_neutral_stroke_accessible: "#616161".into(),
color_compound_brand_stroke: "#0f6cbd".into(),
color_brand_background: "#0f6cbd".into(),
color_brand_background_hover: "#115ea3".into(),
color_brand_background_pressed: "#0c3b5e".into(),
@ -88,6 +96,10 @@ impl ColorTheme {
color_neutral_stroke_1: "#666666".into(),
color_neutral_stroke_1_hover: "#757575".into(),
color_neutral_stroke_1_pressed: "#6b6b6b".into(),
color_neutral_stroke_accessible: "#adadad".into(),
color_compound_brand_stroke: "#479ef5".into(),
color_brand_background: "#115ea3".into(),
color_brand_background_hover: "#0f6cbd".into(),
color_brand_background_pressed: "#0c3b5e".into(),

4
thaw/src/theme/common.rs
View file

@ -43,7 +43,9 @@ pub struct CommonTheme {
pub spacing_horizontal_m: String,
pub spacing_horizontal_l: String,
pub duration_ultra_fast: String,
pub duration_faster: String,
pub curve_accelerate_mid: String,
pub curve_easy_ease: String,
pub height_tiny: String,
@ -98,7 +100,9 @@ impl CommonTheme {
spacing_horizontal_m: "12px".into(),
spacing_horizontal_l: "16px".into(),
duration_ultra_fast: "50ms".into(),
duration_faster: "100ms".into(),
curve_accelerate_mid: "cubic-bezier(1,0,1,1)".into(),
curve_easy_ease: "cubic-bezier(0.33,0,0.67,1)".into(),
height_tiny: "22px".into(),