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;
&.invalid.dirty:not(.validating) {
label:after {
width: 100%;
background: var(--colorError);
label {
border-color: var(--colorSoftError);
}
}
&.focused:not(.validating) {
label:after {
width: 100%;
label {
position: relative;
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 {
label:after {
display: block;
width: 100%;
@include stripeLinesAnimation;
}
}
label {
--flex-gap: $padding * 0.6667;
position: relative;
padding: $padding * 0.75 0;
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);
&.light {
label {
background: #f6f6f7; /* inputControlBackground from light theme */
border-color: #cccdcf; /* inputControlBorder from light theme */
}
}
@ -92,49 +95,6 @@
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 {

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

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

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

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