OpenServer
/
Theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add Scrollbar styling

This commit is contained in:
Stamm 2020-03-12 11:45:54 +01:00
parent 5ff7d42355
commit 4de6315dda
6 changed files with 68 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.editorconfig Normal file
View File

@ -0,0 +1,5 @@
[*]
indent_size = 4
indent_style = space
insert_final_newline = true
charset = utf-8

13
index.html
View File

@ -77,6 +77,11 @@
.content { .content {
margin: 0 2rem; margin: 0 2rem;
} }
.scroll-test {
height: 100px;
overflow-y: scroll;
}
</style> </style>
</head> </head>
@ -260,7 +265,13 @@
</tr> </tr>
</table> </table>
</div> </div>
<div class="margin prev">
<div class="scroll-test">
<script>prip(2000)</script>
</div>
</div>
</div> </div>
</body> </body>
</html> </html>

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "@hibas123/theme", "name": "@hibas123/theme",
"version": "1.2.11", "version": "1.2.15",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

46
package.json
View File

@ -1,24 +1,24 @@
{ {
"name": "@hibas123/theme", "name": "@hibas123/theme",
"version": "1.2.15", "version": "1.2.16",
"description": "", "description": "",
"main": " ", "main": " ",
"files": [ "files": [
"out/*.css", "out/*.css",
"src/*", "src/*",
"index.html", "index.html",
"ipsum.js", "ipsum.js",
"Roboto-Regular.woff2" "Roboto-Regular.woff2"
], ],
"scripts": { "scripts": {
"build": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css", "build": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
"watch": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css", "watch": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
"prepublishOnly": "npm run build" "prepublishOnly": "npm run build"
}, },
"author": "Fabian Stamm <dev@fabianstamm.de>", "author": "Fabian Stamm <dev@fabianstamm.de>",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"sass": "^1.22.7" "sass": "^1.22.7"
}, },
"dependencies": {} "dependencies": {}
} }

17
src/_maketheme.scss
View File

@ -1,12 +1,12 @@
@import "./_vals.scss"; @import "./_vals.scss";
$background:false !default; $background: false !default;
$on-background:false !default; $on-background: false !default;
$button-color: #CCCCCC !default; $button-color: #cccccc !default;
$on-button: #000000 !default; $on-button: #000000 !default;
@if $background==false or $on-background==false { @if $background==false or $on-background==false {
@error("background and on-background must be set!"); @error ("background and on-background must be set!");
} }
:root { :root {
@ -18,7 +18,6 @@ $on-button: #000000 !default;
background: $background; background: $background;
} }
@each $dp in $elevations { @each $dp in $elevations {
.elv-#{$dp} { .elv-#{$dp} {
@include Elevation($dp, false); @include Elevation($dp, false);
@ -33,13 +32,10 @@ $on-button: #000000 !default;
@include ElevationTransition(); @include ElevationTransition();
} }
@function darken-brighten-color($color, $val) { @function darken-brighten-color($color, $val) {
@if (lightness($color) > 50) { @if (lightness($color) > 50) {
@return darken($color, $val); // Lighter backgorund, return dark color @return darken($color, $val); // Lighter backgorund, return dark color
} } @else {
@else {
@return lighten($color, $val); // Darker background, return light color @return lighten($color, $val); // Darker background, return light color
} }
} }
@ -51,4 +47,5 @@ $on-button: #000000 !default;
@import "./theme/_list.scss"; @import "./theme/_list.scss";
@import "./theme/_header.scss"; @import "./theme/_header.scss";
@import "./theme/_card.scss"; @import "./theme/_card.scss";
@import "./theme/table.scss"; @import "./theme/_table.scss";
@import "./theme/_scroll.scss";

20
src/theme/_scroll.scss Normal file
View File

@ -0,0 +1,20 @@
::-webkit-scrollbar {
margin-left: 4px;
}
::-webkit-scrollbar-track {
background: red;
background: darken-brighten-color($background, 5%);
}
::-webkit-scrollbar-thumb {
background: darken-brighten-color($background, 20%);
}
::-webkit-scrollbar-thumb:hover {
background: darken-brighten-color($background, 25%);
}
::-webkit-scrollbar-thumb:active {
background: darken-brighten-color($background, 30%);
}