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

Set scrollbar colors as global styles (#1484)

Browse Source 
* Setting global webkit-scrollbar styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing usage of custom-scrollbar mixin

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Set overflow:auto on .Table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing .drawer-content paddings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Cleaning up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-11-25 10:25:37 +03:00 committed by GitHub
parent 29ea0c8404
commit 2da598b66e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 51 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/components/+apps-releases/release-details.scss
View File

@ -32,7 +32,6 @@
border: 1px solid var(--drawerSubtitleBackground);
border-radius: $radius;
overflow: auto;
@include custom-scrollbar();
.TableHead {
border-bottom: none;

1
src/renderer/components/+preferences/preferences.scss
View File

@ -6,7 +6,6 @@
.Badge {
display: flex;
margin: 0;
margin-bottom: 1px;
padding: $padding $spacing;
}

2
src/renderer/components/+preferences/preferences.tsx
View File

@ -137,7 +137,7 @@ export class Preferences extends React.Component {
formatOptionLabel={this.formatHelmOptionLabel}
controlShouldRenderValue={false}
/>
<div className="repos flex gaps column">
<div className="repos flex column">
{Array.from(this.helmAddedRepos).map(([name, repo]) => {
const tooltipId = `message-${name}`;
return (

2
src/renderer/components/+whats-new/whats-new.scss
View File

@ -26,7 +26,7 @@
}
> .content {
@include custom-scrollbar;
overflow: auto;
margin-top: $spacing;
padding: $spacing * 2;

8
src/renderer/components/ace-editor/ace-editor.scss
View File

@ -7,10 +7,6 @@
.theme-light & {
border: 1px solid gainsboro;
.ace_scrollbar {
@include custom-scrollbar(dark);
}
}
> .editor {
@ -51,8 +47,4 @@
.ace_comment {
color: #808080;
}
.ace_scrollbar {
@include custom-scrollbar;
}
}

36
src/renderer/components/app.scss
View File

@ -1,15 +1,6 @@
@import "~flex.box";
@import "fonts";
*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
outline: none;
-webkit-font-smoothing: antialiased;
}
:root {
--unit: 8px;
--padding: var(--unit);
@ -27,6 +18,33 @@
--drag-region-height: 22px
}
*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
outline: none;
-webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar {
width: 16px;
height: 15px; // Align sizes visually
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--scrollBarColor);
background-clip: padding-box;
border: 4px solid transparent;
border-right-width: 5px;
border-radius: 16px;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
::selection {
background: $primary;
color: white;

3
src/renderer/components/dialog/dialog.scss
View File

@ -1,7 +1,5 @@
.Dialog {
@include custom-scrollbar;
position: fixed;
overflow: auto;
left: 0;
@ -11,6 +9,7 @@
padding: $unit * 5;
z-index: $zIndex-dialog;
overscroll-behavior: none; // prevent swiping with touch-pad on MacOSX
overflow: auto;
&.modal {
background: transparentize(#222, .5);

5
src/renderer/components/dock/pod-logs.scss
View File

@ -3,12 +3,7 @@
--overlay-active-bg: orange;
.logs {
@include custom-scrollbar;
// fix for `this.logsElement.scrollTop = this.logsElement.scrollHeight`
// `overflow: overlay` don't allow scroll to the last line
overflow: auto;
position: relative;
color: $textColorAccent;
background: $logsBackground;

10
src/renderer/components/dock/terminal-window.scss
View File

@ -5,17 +5,7 @@
margin-left: $padding * 2;
margin-top: $padding * 2;
.theme-light & {
.xterm-viewport {
@include custom-scrollbar(dark);
}
}
> .xterm {
overflow: hidden;
}
.xterm-viewport {
@include custom-scrollbar;
}
}

13
src/renderer/components/drawer/drawer.scss
View File

@ -10,12 +10,6 @@
box-shadow: 0 0 $unit * 2 $boxShadow;
z-index: $zIndex-drawer;
.theme-light & {
.drawer-content {
@include custom-scrollbar(dark);
}
}
&.left {
left: 0;
}
@ -71,11 +65,8 @@
}
.drawer-content {
@include custom-scrollbar;
> *:not(.Spinner) {
padding: var(--spacing);
}
overflow: auto;
padding: var(--spacing);
.Table .TableHead {
background-color: $contentColor;

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

@ -33,7 +33,7 @@
}
> .content-wrapper {
@include custom-scrollbar-themed;
overflow: auto;
padding: $spacing * 2;
display: flex;
flex-direction: column;

8
src/renderer/components/layout/sidebar.scss
View File

@ -19,11 +19,7 @@
&.pinned {
.sidebar-nav {
@include custom-scrollbar;
.theme-light & {
@include custom-scrollbar(dark);
}
overflow: auto;
}
}
@ -63,8 +59,6 @@
}
.sidebar-nav {
@include hidden-scrollbar;
padding: $padding / 1.5 0;
.Icon {

5
src/renderer/components/layout/tab-layout.scss
View File

@ -9,13 +9,8 @@
main {
@include custom-scrollbar;
$spacing: $margin * 2;
.theme-light & {
@include custom-scrollbar(dark);
}
grid-area: main;
overflow-y: scroll; // always reserve space for scrollbar (17px)
overflow-x: auto;

2
src/renderer/components/layout/wizard-layout.scss
View File

@ -9,8 +9,8 @@
grid-template-columns: 1fr 40%;
> * {
@include custom-scrollbar-themed;
--flex-gap: #{$spacing};
overflow: auto;
padding: $spacing;
}

10
src/renderer/components/markdown-viewer/markdown-viewer.scss
View File

@ -4,10 +4,8 @@
line-height: 1.5;
word-wrap: break-word;
&.light {
pre, table {
@include custom-scrollbar(dark);
}
pre, table {
overflow: auto;
}
.pl-c {
@ -513,7 +511,6 @@
}
table {
@include custom-scrollbar;
border-collapse: collapse;
display: table;
width: 100%;
@ -581,13 +578,12 @@
.highlight pre,
pre {
@include custom-scrollbar;
padding: 16px;
font-size: 85%;
line-height: 1.45;
background-color: $helmDescriptionPreBackground;
border-radius: 3px;
overflow: auto !important;
overflow: auto;
}
pre code {

3
src/renderer/components/markdown-viewer/markdown-viewer.tsx
View File

@ -6,7 +6,6 @@ import React, { Component } from "react";
import marked from "marked";
import DOMPurify from "dompurify";
import { cssNames } from "../../utils";
import { themeStore } from "../../theme.store";
DOMPurify.addHook('afterSanitizeAttributes', function (node) {
// Set all elements owning target to target=_blank
@ -29,7 +28,7 @@ export class MarkdownViewer extends Component<Props> {
const html = DOMPurify.sanitize(marked(markdown));
return (
<div
className={cssNames("MarkDownViewer", className, themeStore.activeTheme.type)}
className={cssNames("MarkDownViewer", className)}
dangerouslySetInnerHTML={{ __html: html }}
/>
);

46
src/renderer/components/mixins.scss
View File

@ -6,52 +6,6 @@
@import "table/table.mixins";
@import "+network/network-mixins";
// todo: re-use in other places with theming
@mixin custom-scrollbar-themed($invert: false) {
@if ($invert) {
@include custom-scrollbar(dark);
.theme-light & {
@include custom-scrollbar(light);
}
} @else {
// fits better with dark background
@include custom-scrollbar(light);
.theme-light & {
@include custom-scrollbar(dark);
}
}
}
@mixin custom-scrollbar($theme: light, $size: 7px, $borderSpacing: 5px) {
$themes: (
light: #5f6064,
dark: #bbb,
);
$scrollBarColor: if(map_has_key($themes, $theme), map_get($themes, $theme), none);
$scrollBarSize: calc(#{$size} + #{$borderSpacing} * 2);
overflow: auto; // allow scrolling for container
// Webkit
&::-webkit-scrollbar {
width: $scrollBarSize;
height: $scrollBarSize;
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: $scrollBarColor;
background-clip: padding-box;
border: $borderSpacing solid transparent;
border-radius: $scrollBarSize;
}
&::-webkit-scrollbar-corner {
background-color: transparent;
}
}
// Hide scrollbar but keep the element scrollable
@mixin hidden-scrollbar {
overflow: auto;

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

@ -75,7 +75,6 @@ html {
min-width: 100%;
&-list {
@include custom-scrollbar;
padding-right: 1px;
padding-left: 1px;
width: max-content;
@ -152,10 +151,6 @@ html {
--select-option-selected-bgc: $textColorSecondary;
.Select {
&__menu-list {
@include custom-scrollbar($theme: dark);
}
&__multi-value {
background: none;
box-shadow: 0 0 0 1px $textColorSecondary;

13
src/renderer/components/table/table.scss
View File

@ -1,19 +1,14 @@
.Table {
&.scrollable {
.theme-light & {
@include custom-scrollbar(dark);
}
@include custom-scrollbar();
flex: 1 0 0; // hackfix: flex-basis must be "0" for proper work in firefox
}
&.autoSize {
.TableCell {
flex: 1 0;
}
}
&.scrollable {
overflow: auto;
}
&.selectable {
.TableHead, .TableRow {
padding: 0 $padding;

8
src/renderer/components/virtual-list/virtual-list.scss
View File

@ -2,12 +2,6 @@
overflow: hidden;
> .list {
@include custom-scrollbar;
.theme-light & {
@include custom-scrollbar(dark);
}
overflow-y: overlay !important;
overflow-y: overlay!important;
}
}

2
src/renderer/components/wizard/wizard.scss
View File

@ -15,7 +15,7 @@
}
@mixin scrollableContent() {
@include custom-scrollbar($theme: dark);
overflow: auto;
padding: var(--wizard-spacing);
height: var(--wizard-content-height);
max-height: var(--wizard-content-max-height);

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

@ -107,6 +107,7 @@
"selectOptionHoveredColor": "#87909c",
"lineProgressBackground": "#414448",
"radioActiveBackground": "#36393e",
"menuActiveBackground": "#36393e"
"menuActiveBackground": "#36393e",
"scrollBarColor": "#5f6064"
}
}

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

@ -39,13 +39,13 @@
"helmImgBackground": "#e8e8e8",
"helmStableRepo": "#3d90ce",
"helmIncubatorRepo": "#ff7043",
"helmDescriptionHr": "#41474a",
"helmDescriptionHr": "#dddddd",
"helmDescriptionBlockqouteColor": "#555555",
"helmDescriptionBlockqouteBorder": "#8a8f93",
"helmDescriptionBlockquoteBackground": "#eeeeee",
"helmDescriptionHeaders": "#3e4147",
"helmDescriptionH6": "#6a737d",
"helmDescriptionTdBorder": "#47494a",
"helmDescriptionTdBorder": "#c6c6c6",
"helmDescriptionTrBackground": "#1c2125",
"helmDescriptionCodeBackground": "#ffffff1a",
"helmDescriptionPreBackground": "#eeeeee",
@ -108,6 +108,7 @@
"selectOptionHoveredColor": "#ffffff",
"lineProgressBackground": "#e8e8e8",
"radioActiveBackground": "#f1f1f1",
"menuActiveBackground": "#e8e8e8"
"menuActiveBackground": "#e8e8e8",
"scrollBarColor": "#bbbbbb"
}
}