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

Styling inputs and selects

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-04-02 14:18:02 +03:00
parent c8b70d4006
commit 4a20624bd7
6 changed files with 52 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,13 +96,13 @@
}
label {
background: #00000021;
border: 1px solid #202225bf;
background: var(--inputControlBackground);
border: 1px solid var(--inputControlBorder);
border-radius: 4px;
padding: $padding;
&:hover {
border-color: #07080880;
border-color: var(--inputControlHoverBorder);
}
&:focus-within {

29
src/renderer/components/layout/page-layout.scss
View File

@ -35,7 +35,7 @@
right: 0;
bottom: 0;
height: unset;
background-color: var(--mainBackground);
background-color: var(--settingsBackground);
}
> .sidebarRegion {
@ -79,12 +79,12 @@
}
&:hover {
background-color: #4f545c29;
color: #dcddde;
background-color: var(--navHoverBackground);
color: var(--navHoverColor);
}
&.active {
background-color: #4f545c52;
background-color: var(--navSelectedBackground);
}
}
}
@ -143,25 +143,6 @@
color: var(--colorInfo);
}
.Select {
&__control {
box-shadow: 0 0 0 1px #202225bf;
background: #00000021;
}
:hover {
&.Select__control {
box-shadow: 0 0 0 1px #07080880;
}
}
:focus-within {
&.Select__control {
box-shadow: 0 0 0 1px $colorInfo;
}
}
}
section {
display: flex;
flex-direction: column;
@ -202,7 +183,7 @@
hr {
margin-top: 40px;
height: 1px;
border-top: thin solid #ffffff0f;
border-top: thin solid var(--hrColor);
&.small {
margin-top: 20px;

61
src/renderer/components/select/select.scss
View File

@ -5,8 +5,7 @@ html {
$menuBackgroundColor: $contentColor;
--select-menu-bgc: #{$menuBackgroundColor};
--select-menu-border-color: #{$halfGray};
--select-option-selected-color: #{$selectOptionHoveredColor};
--select-option-selected-color: #{$inputOptionHoverColor};
--select-option-focused-bgc: #{$colorInfo};
--select-option-focused-color: #{$textColorAccent};
@ -14,6 +13,18 @@ html {
position: relative;
min-width: 220px;
:hover {
&.Select__control {
box-shadow: 0 0 0 1px var(--inputControlHoverBorder);
}
}
:focus-within {
&.Select__control {
box-shadow: 0 0 0 1px $colorInfo;
}
}
* {
color: inherit;
}
@ -29,11 +40,12 @@ html {
border-radius: $radius;
background: transparent;
min-height: 0;
box-shadow: 0 0 0 1px $halfGray;
box-shadow: 0 0 0 1px var(--inputControlBorder); // TODO: make theme-aware colors
background: var(--inputControlBackground);
cursor: pointer;
&--is-focused {
box-shadow: 0 0 0 2px $primary;
box-shadow: 0 0 0 1px $primary;
}
}
@ -68,13 +80,12 @@ html {
&__menu {
background: var(--select-menu-bgc);
box-shadow: inset 0 0 0 1px var(--select-menu-border-color);
box-shadow: inset 0 0 0 1px var(--inputControlHoverBorder);
width: max-content;
min-width: 100%;
&-list {
padding-right: 1px;
padding-left: 1px;
padding: 6px;
width: max-content;
min-width: 100%;
}
@ -87,19 +98,19 @@ html {
&__option {
white-space: nowrap;
cursor: pointer;
border-radius: 4px;
&:active {
background: $primary;
background: var(--inputControlBackground);
}
&--is-selected {
background: var(--menuSelectedOptionBgc);
color: var(--select-option-selected-color);
background: var(--inputControlBackground);
color: var(--textColorAccent);
}
&--is-focused {
color: var(--select-option-focused-color);
background: var(--select-option-focused-bgc);
background: var(--inputControlBackground);
}
&--is-disabled {
@ -143,32 +154,6 @@ html {
}
.Select, .Select__menu {
&.theme-light {
--select-menu-bgc: white;
--select-option-selected-color: $textColorSecondary;
.Select {
&__multi-value {
background: none;
box-shadow: 0 0 0 1px $textColorSecondary;
}
&__option {
&:active {
color: white;
}
&:hover {
color: white;
}
&--is-focused {
color: white;
}
}
}
}
&.theme-outlined {
.Select__control {
box-shadow: 0 0 0 1px $colorVague;

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

@ -114,11 +114,19 @@
"chartStripesColor": "#ffffff08",
"chartCapacityColor": "#4c545f",
"pieChartDefaultColor": "#30353a",
"selectOptionHoveredColor": "#87909c",
"inputOptionHoverColor": "#87909c",
"inputControlBackground": "#00000021",
"inputControlBorder": "#202225bf",
"inputControlHoverBorder": "#07080880",
"lineProgressBackground": "#414448",
"radioActiveBackground": "#36393e",
"menuActiveBackground": "#36393e",
"menuSelectedOptionBgc": "#36393e",
"scrollBarColor": "#5f6064"
"scrollBarColor": "#5f6064",
"settingsBackground": "#2b3035",
"navSelectedBackground": "#4f545c52",
"navHoverBackground": "#4f545c29",
"navHoverColor": "#dcddde",
"hrColor": "#ffffff0f"
}
}

12
src/renderer/themes/lens-light.json
View File

@ -115,12 +115,20 @@
"chartStripesColor": "#00000009",
"chartCapacityColor": "#cccccc",
"pieChartDefaultColor": "#efefef",
"selectOptionHoveredColor": "#ffffff",
"inputOptionHoverColor": "#ffffff",
"inputControlBackground": "#f6f6f7",
"inputControlBorder": "#cccdcf",
"inputControlHoverBorder": "#b9bbbe",
"lineProgressBackground": "#e8e8e8",
"radioActiveBackground": "#f1f1f1",
"menuActiveBackground": "#e8e8e8",
"menuSelectedOptionBgc": "#e8e8e8",
"scrollBarColor": "#bbbbbb",
"canvasBackground": "#24292e"
"canvasBackground": "#24292e",
"settingsBackground": "#ffffff",
"navSelectedBackground": "#747f8d3d",
"navHoverBackground": "#747f8d14",
"navHoverColor": "#2e3135",
"hrColor": "#06060714"
}
}

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

@ -128,7 +128,7 @@ $iconActiveColor: var(--iconActiveColor);
$iconActiveBackground: var(--iconActiveBackground);
$filterAreaBackground: var(--filterAreaBackground);
$selectOptionHoveredColor: var(--selectOptionHoveredColor);
$inputOptionHoverColor: var(--inputOptionHoverColor);
$lineProgressBackground: var(--lineProgressBackground);
$radioActiveBackground: var(--radioActiveBackground);
$menuActiveBackground: var(--menuActiveBackground);