wlxsp
/
test1
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Updates more scrollbars to behave like vscode

main
Eric Amodio 2 years ago
parent
046836c97e
commit
8d11485d85
8 changed files with 159 additions and 74 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      src/webviews/apps/commitDetails/commitDetails.html
  2. +33
    -32
      src/webviews/apps/commitDetails/commitDetails.scss
  3. +1
    -1
      src/webviews/apps/home/home.html
  4. +42
    -0
      src/webviews/apps/home/home.scss
  5. +37
    -37
      src/webviews/apps/plus/graph/graph.scss
  6. +1
    -1
      src/webviews/apps/settings/settings.html
  7. +42
    -0
      src/webviews/apps/shared/base.scss
  8. +1
    -1
      src/webviews/apps/welcome/welcome.html

+ 2
- 2
src/webviews/apps/commitDetails/commitDetails.html View File

@ -5,7 +5,7 @@
</head>
<body class="preload">
<div class="commit-detail-panel">
<div class="commit-detail-panel scrollable">
<div class="commit-detail-panel__none" id="empty" aria-hidden="true">
<p>Rich details for commits and stashes are shown as you navigate:</p>
@ -153,7 +153,7 @@
</div>
</div>
<div class="commit-details__message">
<p class="commit-details__message-text" data-region="message">
<p class="commit-details__message-text scrollable" data-region="message">
<skeleton-loader></skeleton-loader>
</p>
</div>

+ 33
- 32
src/webviews/apps/commitDetails/commitDetails.scss View File

@ -21,26 +21,27 @@ body {
font-size: var(--font-size);
color: var(--color-foreground);
padding: 0;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
&.scrollable,
.scrollable {
border-color: transparent;
transition: border-color 1s linear;
ul {
list-style: none;
margin: 0;
padding: 0;
}
&:hover,
&:focus-within {
&.scrollable,
.scrollable {
border-color: var(--vscode-scrollbarSlider-background);
transition: none;
}
}
}
.bulleted {
list-style: disc;
padding-left: 1.2em;
> li + li {
margin-top: 0.25em;
&.preload {
&.scrollable,
.scrollable {
transition: none;
}
}
}
@ -64,24 +65,24 @@ ul {
}
}
.commit-detail-panel {
border-color: transparent;
transition: border-color 1s linear;
.commit-details__message-text {
border-color: transparent;
transition: border-color 1s linear;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
&:hover,
&:focus-within {
transition: border-color 0.1s linear;
border-color: var(--vscode-scrollbarSlider-background);
ul {
list-style: none;
margin: 0;
padding: 0;
}
.commit-details__message-text {
transition: border-color 0.1s linear;
border-color: var(--vscode-scrollbarSlider-background);
}
.bulleted {
list-style: disc;
padding-left: 1.2em;
> li + li {
margin-top: 0.25em;
}
}

+ 1
- 1
src/webviews/apps/home/home.html View File

@ -67,7 +67,7 @@
<header class="home__header">
<header-card id="header-card" image="#{webroot}/media/gitlens-logo.webp"></header-card>
</header>
<main class="home__main" id="main" tabindex="-1">
<main class="home__main scrollable" id="main" tabindex="-1">
<style nonce="#{cspNonce}">
.video-banner {
--video-banner-bg: url(#{webroot}/media/getting-started.webp);

+ 42
- 0
src/webviews/apps/home/home.scss View File

@ -47,6 +47,48 @@ body {
min-height: 100%;
line-height: 1.4;
font-size: var(--vscode-font-size);
&.scrollable,
.scrollable {
border-color: transparent;
transition: border-color 1s linear;
}
&:hover,
&:focus-within {
&.scrollable,
.scrollable {
border-color: var(--vscode-scrollbarSlider-background);
transition: none;
}
}
&.preload {
&.scrollable,
.scrollable {
transition: none;
}
}
}
::-webkit-scrollbar-corner {
background-color: transparent !important;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
border-color: inherit;
border-right-style: inset;
border-right-width: calc(100vw + 100vh);
border-radius: unset !important;
&:hover {
border-color: var(--vscode-scrollbarSlider-hoverBackground);
}
&:active {
border-color: var(--vscode-scrollbarSlider-activeBackground);
}
}
:focus {

+ 37
- 37
src/webviews/apps/plus/graph/graph.scss View File

@ -3,6 +3,43 @@
@import '../../shared/glicons';
@import '../../../../../node_modules/@gitkraken/gitkraken-components/dist/styles.css';
body {
.vertical_scrollbar,
.horizontal_scrollbar {
border-color: transparent;
transition: border-color 1s linear;
}
&:hover,
&:focus-within {
.vertical_scrollbar,
.horizontal_scrollbar {
transition: border-color 0.1s linear;
border-color: var(--vscode-scrollbarSlider-background);
}
}
}
::-webkit-scrollbar-corner {
background-color: transparent !important;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
border-color: inherit;
border-right-style: inset;
border-right-width: calc(100vw + 100vh);
border-radius: unset !important;
&:hover {
border-color: var(--vscode-scrollbarSlider-hoverBackground);
}
&:active {
border-color: var(--vscode-scrollbarSlider-activeBackground);
}
}
a {
text-decoration: none;
&:hover {
@ -561,43 +598,6 @@ a {
}
}
::-webkit-scrollbar-corner {
background-color: transparent !important;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
border-color: inherit;
border-right-style: inset;
border-right-width: calc(100vw + 100vh);
border-radius: unset !important;
&:hover {
border-color: var(--vscode-scrollbarSlider-hoverBackground);
}
&:active {
border-color: var(--vscode-scrollbarSlider-activeBackground);
}
}
.graph-app__main {
.vertical_scrollbar,
.horizontal_scrollbar {
border-color: transparent;
transition: border-color 1s linear;
}
&:hover,
&:focus-within {
.vertical_scrollbar,
.horizontal_scrollbar {
transition: border-color 0.1s linear;
border-color: var(--vscode-scrollbarSlider-background);
}
}
}
.graph-header {
& .resizable-handle.horizontal {
--sash-size: 4px;

+ 1
- 1
src/webviews/apps/settings/settings.html View File

@ -4,7 +4,7 @@
<meta charset="utf-8" />
</head>
<body class="preload">
<body class="scrollable preload">
<!-- <canvas class="snow"></canvas>
<img
class="snow__trigger snow__trigger--fixed-right snow__trigger--flipped"

+ 42
- 0
src/webviews/apps/shared/base.scss View File

@ -11,6 +11,48 @@ body {
height: 100%;
line-height: 1.4;
font-size: 100% !important;
&.scrollable,
.scrollable {
border-color: transparent;
transition: border-color 1s linear;
}
&:hover,
&:focus-within {
&.scrollable,
.scrollable {
border-color: var(--vscode-scrollbarSlider-background);
transition: none;
}
}
&.preload {
&.scrollable,
.scrollable {
transition: none;
}
}
}
::-webkit-scrollbar-corner {
background-color: transparent !important;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
border-color: inherit;
border-right-style: inset;
border-right-width: calc(100vw + 100vh);
border-radius: unset !important;
&:hover {
border-color: var(--vscode-scrollbarSlider-hoverBackground);
}
&:active {
border-color: var(--vscode-scrollbarSlider-activeBackground);
}
}
a {

+ 1
- 1
src/webviews/apps/welcome/welcome.html View File

@ -4,7 +4,7 @@
<meta charset="utf-8" />
</head>
<body class="preload">
<body class="scrollable preload">
<!-- <canvas class="snow"></canvas>
<img
class="snow__trigger snow__trigger--fixed-right snow__trigger--flipped"

Write Preview
Loading…
Cancel
Save