mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-09-02 18:33:01 +02:00
Code Issues Releases Wiki Activity

scrollbars

Browse Source
This commit is contained in:
Jordan Scales
2020-04-18 11:05:27 -04:00
parent b082d62415
commit ef88386825
8 changed files with 81 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
dropdown-button-active.svg → button-down-active.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 381 B

After

Width:  |  Height:  |  Size: 381 B

0
dropdown-button.svg → button-down.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 630 B

After

Width:  |  Height:  |  Size: 630 B

8
button-left.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4H8V5H7V6H6V7H5V8H6V9H7V10H8V11H9V4Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 628 B

8
button-right.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4H6V11H7V10H8V9H9V8H10V7H9V6H8V5H7V4Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 629 B

8
button-up.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 629 B

9
docs/index.html
View File

@@ -87,7 +87,14 @@
</section>
<section>
<!-- maybe want some sort of "panel" idk -->
<div id="panel">
<div style="height: 1200px">
<p>This is some text</p>
<p>if there's enough of it</p>
<p>it should scroll</p>
</div>
</div>
</section>
<section class="field-row align-right">

4
scrollbar-background.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="2" height="2" viewBox="0 0 2 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0H0V1H1V2H2V1H1V0Z" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H1V1H0V2H1V1H2V0Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 275 B

47
style.css
View File

@@ -317,7 +317,7 @@ select {
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
background-image: url("./dropdown-button.svg");
background-image: url("./button-down.svg");
background-position: top 2px right 2px;
background-repeat: no-repeat;
}
@@ -329,7 +329,7 @@ textarea:focus {
}
select:active {
background-image: url("./dropdown-button-active.svg");
background-image: url("./button-down-active.svg");
}
a {
@@ -339,3 +339,46 @@ a {
a:focus {
outline: 1px dotted var(--link-blue);
}
#panel {
width: 168px;
height: 120px;
overflow-y: scroll;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background-image: url("./scrollbar-background.svg");
}
::-webkit-scrollbar-thumb {
background-color: var(--button-face);
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}
::-webkit-scrollbar-button:vertical:start {
height: 17px;
background-image: url("./button-up.svg");
}
::-webkit-scrollbar-button:vertical:end {
height: 17px;
background-image: url("./button-down.svg");
}
::-webkit-scrollbar-button:horizontal:start {
height: 17px;
background-image: url("./button-left.svg");
}
::-webkit-scrollbar-button:horizontal:end {
height: 17px;
background-image: url("./button-right.svg");
}
/*
div::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-button {
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}
*/