hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Apply same theme for all inputs

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-01-28 11:09:08 +03:00
parent 9cfe34d0ea
commit 02d270a8c7
3 changed files with 27 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/renderer/components/input/input.scss
View File

@ -9,41 +9,44 @@
text-align: left; text-align: left;
&.invalid.dirty:not(.validating) { &.invalid.dirty:not(.validating) {
label:after { label {
width: 100%; border-color: var(--colorSoftError);
background: var(--colorError);
} }
} }
&.focused:not(.validating) { label {
label:after { position: relative;
width: 100%; background: var(--inputControlBackground);
border-radius: $radius;
border: 1px solid var(--inputControlBorder);
color: var(--textColorTertiary);
padding: var(--padding);
&:hover {
border-color: var(--inputControlHoverBorder);
}
&:focus-within {
border-color: var(--colorInfo);
}
&:after {
display: none;
} }
} }
&.validatingLine { &.validatingLine {
label:after { label:after {
display: block;
width: 100%; width: 100%;
@include stripeLinesAnimation; @include stripeLinesAnimation;
} }
} }
label { &.light {
--flex-gap: $padding * 0.6667; label {
position: relative; background: #f6f6f7; /* inputControlBackground from light theme */
padding: $padding * 0.75 0; border-color: #cccdcf; /* inputControlBorder from light theme */
border-bottom: 1px solid var(--halfGray);
line-height: 1;
&:after {
content: "";
position: absolute;
top: calc(100% - 1px);
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--primary);
} }
} }
@ -92,49 +95,6 @@
padding: $padding * 0.33333; padding: $padding * 0.33333;
} }
} }
//- Themes
&.theme {
&.round {
&.invalid.dirty {
label {
border-color: var(--colorSoftError);
}
}
label {
border-radius: $radius;
border: 1px solid var(--halfGray);
color: inherit;
padding: $padding * 0.25 * 3 $padding * 0.25 * 3;
&:focus-within {
border-color: var(--colorInfo);
}
&:after {
display: none;
}
}
&.black {
label {
background: var(--inputControlBackground);
border-color: var(--inputControlBorder);
color: var(--textColorTertiary);
padding: $padding;
transition: border-color 0.1s;
&:hover {
border-color: var(--inputControlHoverBorder);
}
&:focus-within {
border-color: var(--colorInfo);
}
}
}
}
}
} }
.Tooltip.InputTooltipError { .Tooltip.InputTooltipError {

2
src/renderer/themes/lens-dark.json
View File

@ -121,7 +121,7 @@
"pieChartDefaultColor": "#30353a", "pieChartDefaultColor": "#30353a",
"inputOptionHoverColor": "#87909c", "inputOptionHoverColor": "#87909c",
"inputControlBackground": "#1e2125", "inputControlBackground": "#1e2125",
"inputControlBorder": "#414448", "inputControlBorder": "#3c4043",
"inputControlHoverBorder": "#474a4f", "inputControlHoverBorder": "#474a4f",
"lineProgressBackground": "#414448", "lineProgressBackground": "#414448",
"radioActiveBackground": "#36393e", "radioActiveBackground": "#36393e",

2
src/renderer/themes/theme-vars.css
View File

@ -121,7 +121,7 @@
--pieChartDefaultColor: #30353a; --pieChartDefaultColor: #30353a;
--inputOptionHoverColor: #87909c; --inputOptionHoverColor: #87909c;
--inputControlBackground: #1e2125; --inputControlBackground: #1e2125;
--inputControlBorder: #414448; --inputControlBorder: #3c4043;
--inputControlHoverBorder: #474a4f; --inputControlHoverBorder: #474a4f;
--lineProgressBackground: #414448; --lineProgressBackground: #414448;
--radioActiveBackground: #36393e; --radioActiveBackground: #36393e;